/*
   --------------------------------------------------------------
   Cascade Style Sheet - Project: Curtain vCard HTML5 Template
   Description: Html / Css / jQuery template
   Author: pezflash - http://www.themeforest.net/user/pezflash
   Version: 1.0
   --------------------------------------------------------------
*/ 




/*---------------------------------------------------------------
   GLOBAL STUFF
---------------------------------------------------------------*/

/* Import here your desired font. Default: Lato + Monserrat (titles)
More fonts on: http://www.google.com/webfonts */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,500,600,700);
@import url(http://fonts.googleapis.com/css?family=Montserrat:700);


html {
   display: table;
}

body {
   background: #000 url(../images/pattern.png) repeat top left;
   color: #fff;
   font: 13px 'Lato', sans-serif;
   font-weight: 400;
   display: table-cell;
   vertical-align: middle;
}

html, body {
   width:100%;
   height:100%;
   margin:0;
   padding:0;
}

a {
   text-decoration: none;
   outline: 0;
}

strong {
   font-weight: 700;
}

em {
   font-style: italic;
}

img {
   border: 0;
}

.sublink {
   position: relative;
}

.add-arrow {
   background:transparent url(../images/arrow_2.png) center left no-repeat;
}

.home {
   text-align: center;
   margin-top: -50px;
   padding-bottom: 15px;
}

.home-bt {
   opacity: 0;
   filter: alpha(opacity=0);
   pointer-events: none;
}

#preload {
   position: absolute;
   top: 50%;
   left: 50%;
}

#fullscreen {
   position: absolute;
   float: right;
   right: 17px;
   bottom: 18px;
}

ie #fullscreen {
   display: none;
}



/*---------------------------------------------------------------
   BACKGROUND IMAGE
---------------------------------------------------------------*/
img.bg {
   min-height: 100%;
   min-width: 1920px;   
   width: 100%;
   height: auto;
   position: fixed;
   top: 0;
   left: 0;
}
      
   @media screen and (max-width: 1024px) {
      img.bg {
         left: 50%;
         margin-left: -512px;
      }
   }



/*---------------------------------------------------------------
   SECTIONS
---------------------------------------------------------------*/
#container {
   position: relative;
   margin: 0 auto;
   opacity: 0;
   filter: alpha(opacity=0);
}

   #container .sections {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      background: #000;
   }

   #container .sections .section {
      cursor: pointer;
      position: absolute;
      width: 100%;
      left: 0px;
      overflow: hidden;
      cursor: default;
      pointer-events: none;

      -webkit-transition: opacity .5s ease;
      -moz-transition: opacity .5s ease;
      transition: opacity .5s ease;
   }

   #container .sections .section-1 {
      background: #000 url(../images/1.jpg) no-repeat center center;
   }

   #container .sections .section-2 {
      background: #000 url(../images/2.jpg) no-repeat center center;
   }

   #container .sections .section-3 {
      background: #000 url(../images/3.jpg) no-repeat center center;
   }

   #container .sections .section-4 {
      background: #000 url(../images/4.jpg) no-repeat center center;
   }

      #container .sections .section .title {
         position: relative;
         margin-right: 50px;
         
         font-family: 'Montserrat', sans-serif;
         font-size: 31px;
         font-weight: 700;       
         color: #fff;         
         text-shadow: 0px 0px 1px white;
         float: right;
      }

      #container .sections .section .content {
         position: relative;
      }








/*---------------------------------------------------------------
   ABOUT
---------------------------------------------------------------*/

#about .column1 {
   position: absolute;
   top: 45px;
   left: 50px;
}

#about .column2 {
   position: absolute;
   top: 45px;
   left: 335px;
}

#about .scroll-text {
   position: absolute;  
   line-height: 17px;
   width: 250px;
   height: 307px;
   overflow: auto;
   padding: 0px 12px 0px 0px;
   float: left;
   color: #fff;
   font-weight: 500;
}

   #about .scroll-text a {
      color: #fff;
      background-color: #000;
      padding: 0 2px;

      -webkit-transition: color .3s ease;
      -moz-transition: color .3s ease;
      transition: color .3s ease;
   }

   #about .scroll-text a:hover {
      color: #111;
      background-color: #fff;
   }

   /* CUSTOM STYLES FOR SCROLLBAR */
   .mCSB_scrollTools .mCSB_draggerRail {
      background:#ffffff;
   }
   .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
      background:#eb6e1d;
   }
   .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
      background: #ffffff;
   }
   .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
   .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
      background: #ffffff; 
   }

#about .subtitle {
   font-family: 'Montserrat', sans-serif;
   font-size: 16px;
   font-weight: 700;
   display: block;
}

#about .sublinks {
   position: absolute;
   top: 235px;
   left: 340px;
   width: 250px;
}

   #about .sublinks a {
      font-size: 12px;
      color: #111;
      line-height: 23px;
      background-color: #f29214;
      padding:3px 6px;

      -webkit-transition: color .3s ease;
      -moz-transition: color .3s ease;
      transition: color .3s ease;
   }

   #about .sublinks a:hover {
      color: #fff;
      background-color: #000;
   }

#about .slideshow {
   position: absolute;
   top: 45px;
   left: 618px;
}

   #about .slideshow img {
      display: block;
      float: left;
      width: 330px;
      height: 230px;
   }

#about .navi {
   position: absolute;
   top: 260px;
   left: 760px;
   z-index: 100;
}
            
   #about .navi img {
      cursor: pointer;
      border: 3px solid transparent;
      border-radius: 20px;

      -webkit-transition: border .3s ease;
      -moz-transition: border .3s ease;
      transition: border .3s ease;
   }

   #about .navi .prev:active, #about .navi .next:active {
      opacity: 0.6;
      filter: alpha(opacity=60);
   }
   
   #about .navi .prev:hover, #about .navi .next:hover {
      border: 3px solid #f29214;
   }






/*---------------------------------------------------------------
   PORTFOLIO - SLIDER GALLERY
---------------------------------------------------------------*/
#slider .slideshow {
   position: absolute;
   top: 0px;
   left: 0px;
}

   #slider .slideshow img {
      display: block;
      float: left;
      width: 1000px;
      height: 400px;
   }

#slider .navi {
   position: absolute;
   top: 340px;
   left: 475px;
   z-index: 100;
}
            
   #slider .navi img {
      cursor: pointer;
      border: 3px solid transparent;
      border-radius: 20px;

      -webkit-transition: border .3s ease;
      -moz-transition: border .3s ease;
      transition: border .3s ease;
   }

   #slider .navi .prev:active, #slider .navi .next:active {
      opacity: 0.6;
      filter: alpha(opacity=60);
   }
   
   #slider .navi .prev:hover, #slider .navi .next:hover {
      border: 3px solid #f29214;
   }










/*---------------------------------------------------------------
   CLIENTS (USING FILTERABLE GRID GALLERY)
---------------------------------------------------------------*/
#clients {
   position: absolute;
   top: 0px;
   left: 0px;
}
   #clients div .group {
      position: absolute;
      top: 332px;
      right: 310px;
   }

   #clients .group:after {
      visibility: hidden;
      display: block;
      content: "";
      clear: both;
      height: 0;
   }

   #clients .filter li {
      float: left;
      padding-left: 3px;
   }

   #clients .filter a {
      font-size: 12px;
      color: #fff;
      line-height: 23px;
      background-color: #000;
      padding:3px 6px;

      -webkit-transition: color .3s ease;
      -moz-transition: color .3s ease;
      transition: color .3s ease;
   }

   #clients .filter a:hover,
   #clients .filter .current a {
      color: #111;
      background-color: #f29214;
   }

   #clients .items {
      margin: 40px 50px;
      width: 1005px;
   }

      #clients .items li {
         float: left;
         margin: 0 15px 10px 0;
      }

      #clients .items a, #clients .items img {
         display: block;
      }


      #clients .items .item {
         position: relative;
      }

      






/*---------------------------------------------------------------
   CONTACT / FORM / MAP / NETWORKS
---------------------------------------------------------------*/
#contact {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
}

   #contact .contact-block {
      position: absolute;
      top: 40px;
      left: 50px;
   }

      #contact .contact-block .address {
         font-size: 13px;
         line-height: 17px;
         color: #fff;   
         float: left;
         width: 200px;
         margin: 0px 0px 0px 0px;
      }

         #contact .contact-block .address a {
            font-size: 12px;
            color: #fff;
            line-height: 23px;
            background-color: #000;

            -webkit-transition: color .3s ease;
            -moz-transition: color .3s ease;
            transition: color .3s ease;
         }

         #contact .contact-block .address a:hover {
            color: #111;
            background-color: #f29214;
         }

         #contact .contact-block .address-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 17px;
            color: #fff;
            line-height: 23px;
            font-weight: 700;
         }

         #contact .contact-block .sublinks {
            position: absolute;
            top: 170px;
         
         }

            #contact .contact-block .sublinks a {
               font-size: 12px;
               color: #111;
               line-height: 23px;
               background-color: #f29214;
               padding:3px 6px;

               -webkit-transition: color .3s ease;
               -moz-transition: color .3s ease;
               transition: color .3s ease;
            }

            #contact .contact-block .sublinks a:hover {
               color: #fff;
               background-color: #000;
            }

      #contact .contact-block .form {
         float: left;
         margin: 0px 0px 0px 0px;
      }

         #contact .contact-block hr {
            clear: both;
            border-bottom: 0;
            border-top: 0px solid #fff;
            border-right: 0;
            border-left: 0;
            min-height: 0px;
            height: 1px;
         }

         #contact .contact-block .form .fields {
            font: 15px 'Lato', sans-serif;
            color: #fff;
            background-color: transparent;
            border-width: 0px;
            border-bottom: 1px dashed #f29214;
            padding: 13px 0px 3px 0px;
            margin: 0px 0px 3px 0px;
            width: 350px;
            resize: none;
            overflow: auto;
         }

         #contact .contact-block .form .button {
            font: 12px 'Lato', sans-serif;
            font-weight: 300;
            margin: 5px 0px 0px 0px;
            padding: 1px 5px 1px 5px;
            color: #fff;
            background-color: transparent;
            border: none;
            border: 1px solid #777;
            cursor: pointer;
            float: right;
         }

         #contact .contact-block .form .loader_message {
            color: #f29214;
            margin-top: 4px;
            position: relative;
            float: left;
         }

         #contact .contact-block .form .loader_icon {
            -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
            background: #000 url(../images/preload2.gif) no-repeat center center;
            background: rgba(0, 0, 0, 0.7) url(../images/preload2.gif) no-repeat center center;
            height: 23px;
            width: 23px;
            position: relative;
            margin: 2px 0 0 250px;
            display: none;
         }


      #contact .contact-block .intro {
         font-size: 25px;
         line-height: 30px;
         color: #f29214;
         float: left;
         text-align: right;
         width: 300px;
         margin: 0px 0px 0px 50px;
      }

   #contact .map {
      position: absolute;
      width: 1000px;
      height: 430px;
      display: none;
   }

      #contact .map .map-close-bt {
         position: absolute;
         top: 30px;
         right: 30px;
         z-index: 100;
         font-size: 12px;
         color: #fff;
         background-color: #000;
         padding: 4px 6px;
         cursor: pointer;

         -webkit-transition: color .3s ease;
         -moz-transition: color .3s ease;
         transition: color .3s ease;
      }

      #contact .map .map-close-bt:hover {
         color: #111;
         background-color: #f29214;
      }

      #map-canvas {
         position: absolute;
         width: 1000px;
         height: 430px;
      }

   #contact .networks {
      position: absolute;
      top: 285px;
      left: 0px;
   }

   /* social button elements */
   @font-face {
      font-family: 'icomoon';
      src: url("../fonts/icomoon.eot");
      src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.ttf") format("truetype"), url("../fonts/icomoon.svg#icomoon") format("svg");
      font-weight: normal;
      font-style: normal;
   }

   .icon-dribbble:before, .icon-twitter:before, .icon-facebook:before, .icon-pinterest:before,
   .icon-flickr:before, .icon-google-plus:before, .icon-tumblr:before, .icon-github:before,
   .icon-dribbble:after, .icon-twitter:after, .icon-facebook:after, .icon-pinterest:after,
   .icon-flickr:after, .icon-google-plus:after, .icon-tumblr:after {
      font-size: 30px;
      font-family: 'icomoon';

      speak: none;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
   }

   .icon-dribbble:before, .icon-dribbble:after { content: "\e00a"; }
   .icon-twitter:before, .icon-twitter:after { content: "\e00b"; }
   .icon-facebook:before, .icon-facebook:after { content: "\e007"; }
   .icon-pinterest:before, .icon-pinterest:after { content: "\e000"; }
   .icon-flickr:before, .icon-flickr:after { content: "\e001"; }
   .icon-google-plus:before, .icon-google-plus:after { content: "\e003"; }
   .icon-tumblr:before, .icon-tumblr:after { content: "\e002"; }

   ul.social {
      text-align: center;
   }

      ul.social li {
         display: inline-block;
         width: 50px;
         height: 50px;
         overflow: hidden;
         line-height: 64px;
         background: #1474f2;
         border-radius: 100%;
         margin-right: 5px;
         -webkit-transition-duration: 0.5s;
         -moz-transition-duration: 0.5s;
         -o-transition-duration: 0.5s;
         transition-duration: 0.5s;
      }

      ul.social li:hover {
         background: #1474f2;
      }

         ul.social li:hover a {
            top: -40px;
         }

         ul.social li a {
            display: block;
            width: 100%;
            height: 200%;
            position: relative;
            top: 0;
            color: #ffffff;
            -webkit-transition: top 0.5s;
            -moz-transition: top 0.5s;
            -o-transition: top 0.5s;
            transition: top 0.5s;
         }

         ul.social li a:after {
            text-align: center;
            position: absolute;
            width: inherit;
            height: 50%;
            left: 0;
            bottom: 0;
            line-height: 30px;
            color: #ffffff;
         }