/* CNIPRO.COM - Main Site CSS */

/* global 
--------------------------------------------- */
body { 
font: 100% / 1.5 Arial; 
color:#FFF;
background: url(../images/bg01.jpg) no-repeat center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #000;
}
* { margin:0; padding:0; }
h1, h2 { 
font-weight: 400px;
text-align: center; 
text-transform: uppercase;
}
h3 { color: #87CEFA; margin-bottom: 10px; }
p { margin-bottom: 10px; }
.clear {
clear:both;
}
#logo {
   float:left;
   max-width:614px;
}
/* nav
--------------------------------------------- */
#header { 
display:block;
height: 220px;
margin:0px auto;
width:100%;
max-width:1024px;
z-index:5;
}
ul#nav {
float: right;
margin-top: 95px;
}
ul#nav li {
float: left;
list-style: none;
border-radius: 1em;
}
ul#nav li a {
color:#fff;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
padding:20px;
}
ul#nav li:hover {
    color:#fff;
    background-color: rgba(35, 133, 173, 1);
}

.top-nav {
   width:100%;
   height:50px;
   position:fixed;
   top:-50px;
   z-index:100;
   background-color: rgba(35, 133, 173, 1);
}

/* group 1
--------------------------------------------- */
#group1 {
width:100%;
min-height:1024px;
position:relative;
z-index: 1; /* slide over group 2 */
/*background: url(images/bg01.jpg) no-repeat center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;*/
}
#group1 h1 {
font-size: 30px;
padding:60px 0 0 0;
}
#group1 .p1 {
margin-bottom:20px; 
}
#group1 .p2 {
width: 80%;
font-size: 14px;
line-height: 19px;
}
#player-wrapper {
width:100%;
max-width:980px;
margin:0px auto;
display:block;
}
iframe#player {
height: 600px;
width:980px;
margin:0px auto;
}
#group1 .sharing-box {
   width:130px;
   margin:0px auto;
}
/* group 2
--------------------------------------------- */
#group2 {
width:100%;
height:1024px;
position:relative;
z-index: 1; /* slide under groups 1 and 3 */
background: url(../images/bg02.jpg) no-repeat center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-size: 12px;
}
#group2 h2 {
font-size: 20px;
padding:120px 0 0 0;
}

#group2 .content {
   width: 100%;
   max-width: 980px;
   margin: 30px auto 0px;
   height: 1024px;
}

#group2 .col1 {
   float:left;
   width:20%;
   display: block;
   margin-right:50px;
}

      #group2 .col1 ul.lease-menu { 
         -webkit-transition: 1s linear 2s; /* For Safari 3.1 to 6.0 */
         transition: 1s linear 2s;
      }

            ul.lease-menu a { display:block; }

            ul.lease-menu li { 
               margin-bottom:10px;
               list-style: none;
               border-radius: 1em;
               padding:10px;
               padding-left: 55px;
            }
            ul.lease-menu li.active {
               background-color: rgb(57, 107, 164); /* fallback */
               background-color: rgba(57, 107, 164, .8);
            }
            ul.lease-menu li.first,
            ul.lease-menu li.second,
            ul.lease-menu li.third {
               position:relative;
            }

            ul.lease-menu li.first img,
            ul.lease-menu li.second img,
            ul.lease-menu li.third img {
               position:absolute;
               top:10px;
               left:10px;
            } 
            ul.lease-menu li.third img {
               opacity:.4;
            } 

#group2 .col2 {
   float:left;
   width:40%;
   display: block;
   margin-right:20px;
}

#group2 .col3 a {
   color:lightskyblue;
}

      #group2 .col2 ol { }

            ol li { 
               margin-bottom:10px;
               list-style-type: decimal;
            }

            .regular-lease { display:block; }
            .premium-lease, 
            .exclusive-rights { display:none; }


#group2 .col3 {
   float:left;
   width:30%;
   display: block;
}

      #group2 .col3 .section1,
      #group2 .col3 .section2 { 
         background-color: rgb(57, 107, 164); /* fallback */
         background-color: rgba(57, 107, 164, .8);
         border-radius: 1em;
         padding:20px;
         margin-bottom:20px;
      }


/* group 3
--------------------------------------------- */
#group3 {
   width:100%;
   height:1024px;
   position:relative;
   z-index: 1; /* slide over group 2 and 4 */
   background: url(../images/bg03.jpg) no-repeat center center; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   font-size: .8em;
}
#group3 h2 {
   font-size: 20px;
   padding:120px 0 0 0;
}
#group3 .list {
   background-color: rgb(57, 107, 164); /* fallback */
   background-color: rgba(57, 107, 164, .8);
   width:100%;
   max-width:600px;
   padding:20px;
   border-radius: 1em;
   margin:50px auto 0 auto;
}
#group3 .list li {
   list-style: none;
}
/* group 4
--------------------------------------------- */
#group4 {
   width:100%;
   height:600px;
   position:relative;
   overflow:hidden;
   z-index: 1; /* slide under group 3 and 5 */
   /*background: url(images/bg04.jpg) no-repeat center center; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;*/
}
#group4 a {
   color:#FFF;
}
.copyright {
   font-size: 12px;
   color:#666;
   margin:20px;
}
#footer-logo {
   max-width:649px;
}

/* other elements
--------------------------------------------- */
#section-icon {
   width:160px;
   height:180px;
   position:absolute;
   top:-80px;
   left:50%;
   margin-left:-90px;
   background: url(../images/section_icons.png) no-repeat bottom center;
   z-index:20;
}
#section-icon {
   width:160px;
   height:180px;
   height:180px;
   position:absolute;
   top:-80px;
   left:50%;
   margin-left:-90px;
   background: url(../images/section_icons.png) no-repeat top center;
   z-index:20;
}
/* effects
--------------------------------------------- */
/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow {
   display: inline-block;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-property: box-shadow;
   transition-property: box-shadow;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.glow:hover, .glow:focus, .glow:active {
   box-shadow: 0px 0px 40px rgba(35, 133, 173, 1);
}
#menu-icon { 
   display:none;
}
/* targeting specific device width
--------------------------------------------- */
@media (max-width: 1023px) {
   #parallax {
      min-width:none;
      width:100%;
   }
   #group1 .p2 {
      width: 90%;
   }
}
@media (max-width: 1023px) {
   #menu-icon { 
      display:block;
   }
   #parallax {
      min-width:none;
      width:100%;
   }
   #header {
      height:150px;
   }
   #logo {
      float:left;
      max-width:614px;
      width:30%;
   }
   #group1 .p2 {
      width: 90%;
   }
   ul#nav {
      float:left;
      margin-top:50px;
   }
   ul#nav li a {
      font-size:14px;
   }
   #footer-logo {
      width:100%;
   }
   #logo img {
      max-height:80px;
      max-width:250px;
   }

   #player-wrapper {
      width:320px;
   }
   iframe#player {
   height: 600px;
   width:320px;
   margin:0px auto;
   }
   
   #group1, #group2, #group3 {
      height:auto;
      padding-bottom:100px; 
   }

   #group2 h2 {
      font-size: 2em;
      padding: 120px 5% 0 5%;
   }
   #group2 .col3 {
      float: none;
      width: 90%;
      display: block;
      clear: both;
      margin: 0 auto;
   }
   #group2 .col1 {
      float: left;
      width: 20%;
      display: block;
      margin: 20px 40px 10px 40px;
   }
   #group2 .col2 {
      float: left;
      width: 60%;
      display: block;
      margin: 20px;
   }

   .col3 .section1 {
      /*float: left;
      width: 50%;*/
   }
   .col3 .section2 {
      /*float: left;
      width: 30%;
      margin-left: 20px;*/
   }

   img#mixing1, img#mixing2 { width:45%; }
} 

@media (max-width: 1023px) {
   body {
   background: url(../images/bg01.jpg)repeat center fixed; 
   -webkit-background-size: none;
   -moz-background-size: none;
   -o-background-size: none;
   background-size: none;
   }
   #menu-icon {
      width: 30px;
      position: absolute;
      top: 25px;
      right: 20px;
      opacity: .4;
      display:block;
   }
   #menu-icon img {
      width:100%;
   }

   #header {
   height: 80px;
   position: fixed;
   background: rgba(0,0,0,.9);
   border-bottom: solid 1px #202020;
   }
   #logo {
   float: none;
   max-width: 614px;
   width: 50%;
   margin: 0;
   display: block;
   }
   #group2 .col1 {
   float: none;
   width: 100%;
   display: block;
   margin: 0;
   }
   ul.lease-menu li {
      float:left;
   }
   img#mixing1, img#mixing2 {
   width: 70%;
   }
   #group1 h1 {
   font-size: 1.4em;
   padding: 40px 0 10px 0;
   line-height: 1.4em;
   }
   #group1 .p1 {
   margin-bottom: 20px;
   font-size: .8em;
   }
   #group1 .p2 {
   width: 90%;
   font-size: .8em;
   }
   #group2 {
      min-height: 1724px;
   }
   #group2 .col2 {
   float: left;
   width: 80%;
   display: block;
   padding: 30px 10%;
   margin:0;
   }
   #group3 .list {
      width:80%;
      max-width:320px
   }

   /*#player-wrapper {
   width: 55%;
   max-width: 980px;
   margin: 30px auto 0 auto;
   display: block;
   }*/

   /* nav
   ---------------------------------- */
   ul#nav li {
   float: none;
   text-align: center;
   }

   .glow {
      display:block;
   }

   ul#nav {
   float: none;
   margin: 0px auto 30px auto;
   width: 100%;
   display: none;
   background: rgba(0,0,0,.9);
   padding: 0 0 20px 0;
   }
   ul#nav li {
      padding:10px 0 10px 0;
   }
   #player-wrapper {
      padding: 80px 0 0 0px;
   }
}