body
{
       margin: 0px 0px 0px 0px;
       background-image: url("../Images/river2.JPG");
       /*background-size: contain;*/
       background-attachment: fixed;
       background-size: cover;
       background-repeat: no-repeat; 
       background-size: 100% 100%;    
       background-color: #76fef8;
}

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6          { font-weight: bolder }

/* The grid: Four equal columns that floats next to each other */

.row{
       /*display:flex;
       flex-direction: row;
       justify-content: center;*/
       position:absolute;
       top:200px;
}

.column 
{
       display:flex;
       flex-direction:column;
       position:relative;
       float: left;
       width: 10%;
       height: 150px;
       padding: 10px;
}
       
/* Style the images inside the grid */
.column img {
       height:100%;
       width:100%;
       opacity: 0.8;
       cursor: pointer;
}

.column img:hover {
       opacity: 1;
}

/* Clear floats after the columns */
.row:after {
       content: "";
       display: table;
       clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
       position: relative;
       float:left;
       width:50%;
       clear:both;
       display: none;
}

#expandedImg
{
       position:relative;
       float:left;
       margin:10px 2px;
       width:100%;
       height:400px;
}

/* Expanding image text */
#imgtext {
       position: relative;
       float:left;
       /*bottom: 15px;*/
       /*left: 15px;*/
       width:45%;
       color: white;
       margin: 5px;
       padding: 5px;
font-size: 20px;
}

.zoomable:hover{
       transform: scale(2);
}

/* Closable button inside the image */
.closebtn {
       position: absolute;
       top: 10px;
       right: 15px;
       color: white;
       font-size: 35px;
       cursor: pointer;
}

#container,

footer {

       border-top: 1px solid #7acef4;

}

@media (min-device-width:1024px){
       .title
       {
              position:relative;
              float:left;
              text-align: center;
              color:white;
              background-color: black;
              font-weight: bold;
              top:37px;
              left:5px;
              width: 75%;
       }

       .collections
       {
              display:flex;
              flex-direction: row;
              flex-wrap:wrap;
              position:relative;
              float:left;
              top:37px;
              left:5px;
              width: 98%;
       } 

       .logo
       {
              position:relative;
              float:left;
              top:37px;
              right:5px;
              width: 25%;
              height: 200px;
       }

       h1              { font-size: 2em; margin: .67em 0 }
       h2              { font-size: 1.5em; margin: .75em 0 }
       h3              { font-size: 1.17em; margin: .83em 0 }
       h5              { font-size: .83em; margin: 1.5em 0 }
       h6              { font-size: .75em; margin: 1.67em 0 }
       h1, h2, h3, h4,
       h5, h6          { font-weight: bolder }

 
       nav
       {
              position:fixed;
              width:100%;
              height: 34px;
              z-index: 99;
              background: #4c4c4c; /* Old browsers */
              background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */
              background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
              background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
              filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */          
       }

       nav ul.development
       {
       float:right;
       }

       nav ul 
       {
              text-align: left;
              display: inline;
              float: left;
              margin: 0;
              list-style: none;
              border-right: 1px solid rgba(255, 255, 255, 0.0976562);
              border-left: 1px solid rgba(0, 0, 0, 0.347656);
       }



       .tinynav-container { display: none; }

       .tinynav { display: none; }



       nav ul.links {

              float: right;

       }



       nav ul li {

              font: bold 13px/17px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;

              display: inline-block;

              float: left;

              position: relative;

              top: 1px;

              cursor: pointer;

              transition: all 0.2s;

              text-shadow: 0 0 2px #000;

              border-left: 1px solid rgba(255, 255, 255, 0.0976562);

              border-right: 1px solid rgba(0, 0, 0, 0.347656);

       }

       .ie nav ul li {

              top: 2px;

       }



       nav ul li:hover {

              background: #000;

              color: #fff;

       }



       nav ul li i {

              height: 1em;

       }



       nav ul li a {

              color: #e6e6e6 !important;

              font-weight: normal;

              font-style: normal;

              text-decoration: none;

              display: block;

              padding: 8px 12px;

       }



       nav ul li ul.narrow {

              padding: 0;

              position: absolute;

              top: 32px;

              left: -2px;

              width: 160px;

              display: none;

              opacity: 0;

              visibility: hidden;

              transition: opacity 0.2s;

              box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);

              z-index: 400;

       }



       nav ul li ul {

              padding: 0;

              position: absolute;

              top: 32px;

              left: -2px;

              width: 240px;

              display: none;

              opacity: 0;

              visibility: hidden;

              transition: opacity 0.2s;

              box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);

              z-index: 400;

       }       



       nav ul li ul.wide {

              padding: 0;

              position: absolute;

              top: 32px;

              left: -2px;

              width: 280px;

              display: none;

              opacity: 0;

              visibility: hidden;

              transition: opacity 0.2s;

              box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);

              z-index: 400;

       }



       nav ul li ul li {

              /*background: url(../images/bg-footer-noise.jpg) #000;*/

       background: #4c4c4c; /* Old browsers */

       background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */

       background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */

       background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */          

              

              display: block;

              color: #fff;

              float: none;



       -webkit-transition:height 200ms ease-in;

       -moz-transition:height 200ms ease-in;

       -o-transition:height 200ms ease-in;

       transition:height 200ms ease-in;           

       }



       /*nav ul li ul li:hover { background: #000; }*/

       nav ul li:hover > ul {

              display: block;

              opacity: 1;

              visibility: visible;

       }



       nav ul.projects li.project {

              width: 42px;

              padding: 0;

              height: 33px;

              text-indent: -9999px;

              background: url(../images/jq-nav-icons.png) -6px 0;

              z-index: 10;

       }



       nav ul.projects li.project a {

              display: block;

              height: 33px;

       }



       nav ul.projects li.jquery-ui {

              background-position: -57px 0;

       }



       nav ul.projects li.jquery-mobile {

              background-position: -107px 0;

       }



       nav ul.projects li.sizzlejs {

              background-position: -155px 0;

       }



       nav ul.projects li.qunitjs {

              background-position: -204px 0;

       }



       nav ul.projects li.jquery {

              background-position: 0 bottom;

              width: 52px;

              position: relative;

              margin-top:1px;

              border: none;

       }



       nav ul.projects {

       border-left: none;

       }



       nav ul.projects li.jquery-ui {

              border-left: none;

              background-position: -59px 0;

       }



       nav ul.projects li.jquery-ui {

              background-position: -50px bottom;

              width: 52px;

              position: relative;

              margin-top:1px;

              border: none;

       }



       nav ul.projects li.jquery {

              border-right: none;

              background-position: -2px 0;

       }



       nav ul.projects li.jquery-mobile {

              border-left: none;

       }



       nav ul.projects li.jquery-mobile {

              background-position: -100px bottom;

              width: 52px;

              position: relative;

              margin-top:1px;

              border: none;

       }



       nav ul.projects li.jquery-ui {

              border-right: none;

              background-position: -53px 0;

       }



       nav ul.projects li.jquery-mobile {

              border-right: none;

       }



       nav ul.projects li.sizzlejs{

              border-left: none;

              background-position: -157px 0;

       }





       ul.projects li.jquery-mobile {

              border-right: none;

              background-position: -102px 0;

       }



       nav ul.projects li.sizzlejs {

              background-position: -148px bottom;

              width: 52px;

              position: relative;

              margin-top:1px;

              border: none;

       }



       nav ul.projects li.qunitjs{

              border-left: none;

              background-position: -206px 0;

       }





       nav ul.projects li.sizzlejs {

              border-right: none;

       }



       nav ul.projects li.qunitjs {

              background-position: -202px bottom;

              width: 52px;

              position: relative;

              margin-top:1px;

              border: none;

       }



       nav ul.projects {

              border-right: none;

       }



       .narrow .slideout ul

       {

       top:2px;

       left: 158px;

       width:140px;

       }



       .slideout ul

       {

       top:2px;

       left: 238px; 

       }



       .wide .slideout ul

       {

       top:2px;

       left: 278px; 

       }





       .constrain {

              max-width: 1240px;

              margin: 0 auto;

              padding: 0 20px;

       }     



       #container

       {

              background: #0769ad;

              margin: 0 auto;

              padding: 0 20px;

       }  


       .dropdown-menu > li > a:hover,

       .dropdown-menu > li > a:focus {

       background-color: #e8e8e8;

       background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);

       background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);

       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);

       background-repeat: repeat-x;

       }

       .dropdown-menu > .active > a,

       .dropdown-menu > .active > a:hover,

       .dropdown-menu > .active > a:focus {

       background-color: #357ebd;

       background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);

       background-image:         linear-gradient(to bottom, #428bca 0%, #357ebd 100%);

       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);

       background-repeat: repeat-x;

       }
}