@import url('http://fonts.googleapis.com/css?family=Open+Sans');
@import url('http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic');

body{font-family: "Open Sans";font-size: 1em; margin: 0; padding: 0}

h1,h2,h3,h4,h5{font-family: "Open Sans";}
#me .sidebar{
    overflow-y: hidden;
    overflow: hidden;
    background-color: #58595b;
    color: #fff;
    height: 100%;
}
#me .sidebar ul { margin:0 20px; list-style: none}
#me .sidebar a{ color: #fff; display: block; padding: 10px 0; border-bottom: #777 1px solid;  transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;}
#me .sidebar a:hover{ color: #fff; background: #666667; }
/*#me .sidebar ul ul {
    display:none; 
    
}*/
/*#me .sidebar  li:hover ul li{
    display:block;
   
}*/

.wrapper
{
    max-width: 980px; 
    margin: 0 auto;
    position: relative;
   
}
.leadline{
    width: 100%;
    background: #732588 none;
    background: -webkit-gradient(linear, left top, right top, from(#732588), to(#4c1663));
    background: -webkit-linear-gradient(left, #732588, #4c1663);
    background: -moz-linear-gradient(left, #732588, #4c1663);
    background: -ms-linear-gradient(left, #732588, #4c1663);
    background: -o-linear-gradient(left, #732588, #4c1663);
   
}
.leadline h2{
      color: #fff;
      font-weight: bold;
      font-size: 26px;
     
 
}
.leadline p{ color: #fff;   padding-top: 20px;}
.alert{ margin: 20px 0}
.alert-error{ color: #ff0000}
.alert-success{ color: #333}
.address p{ margin-bottom: 5px; font-size: 14px;}
.contact-title{ margin:25px 0 25px 15px; padding-bottom: 18px; border-bottom: #ccc 1px solid ; color: #666}
.sideclick{ position: absolute; top: 0; left: 0;  display: block; z-index: 1 }
.mainslider{ background: url('../img/header.png') no-repeat;  height: 300px; }

.flex-direction-nav {height: 0;}
.flex-direction-nav a  { display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 100%; z-index: 10; overflow: hidden; opacity: 1; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { left: 0px; background: url('../img/arrow.png') no-repeat 0 0; width: 15px; text-indent: -999px; height: 24px;   }
.flex-direction-nav .flex-next { right: 0px; background: url('../img/arrow.png') no-repeat -14PX -2px; width: 15px; text-indent: -999px; height: 24px;   }

.flex-caption { position: absolute; bottom: 0; left: 0; background: #fff}
.flex-caption h3{ text-align: center; font-size: 18px;}
/*

.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; }
.flex-direction-nav a.flex-next:before  { content: '\f002'; }
*/

body#me .slider{ overflow:hidden }
body#me .flexslider { width: 795px; }
body#me .flexslider .flex-viewport {overflow: visible !important;}
body#me .flexslider .slides li { padding: 0 10px; position: relative }
body#me .flexslider .slides li img{
    
}

.main-title{ font-size: 26px; margin-bottom: 0; margin-top: 18px; padding-left: 10px; color: #4c1663}
.header-home{  background-image: url('../img/header.png');background-repeat:no-repeat;
background-position:top center;}

.header-home .header-title{ color: #fff; text-shadow: 0px 0px 2px rgba(150, 150, 150, 1);}

.header-page{ background-image: url('../img/p_hbg.png');background-repeat:no-repeat;
background-size: auto;
background-position:center top;}
.header-contact{ background-image: url('../img/contactbg.png');background-repeat:no-repeat;
background-size: cover;
background-position:center top; padding-bottom: 10%;}
.header-service{ background-image: url('../img/services.png');background-repeat:no-repeat;
background-size: cover;
background-position:center top;}
.header-service .header-title{ text-align: center}

.header-about{ background-image: url('../img/aboutbg.png');background-repeat:no-repeat;
background-size: cover;
background-position:center top;  padding-bottom: 10%;}

.header-title{text-align: right; margin-top: 100px; color: #66207b; }
.logo { padding-left: 0px; padding-top: 20px; margin-bottom: 142px; width: 101px; height: 68px; }
.logo span{ background: url('../img/logo.png') no-repeat; width: 101px; height: 69px; text-indent: -999px; display: block}

.margin-20{  margin-top: 20px;}
#container {padding-top: 1.5em; margin-bottom: 2em;}
#container .box a{
    display: block;
}
#container .box{ margin:  0 0px 10px 0;}
 
#container .box a:hover .img-cube,#container .box a:hover .desc-cube{
    background: #732588 none;
    background: -webkit-gradient(linear, left top, right top, from(#732588), to(#4c1663));
    background: -webkit-linear-gradient(left, #732588, #4c1663);
    background: -moz-linear-gradient(left, #732588, #4c1663);
    background: -ms-linear-gradient(left, #732588, #4c1663);
    background: -o-linear-gradient(left, #732588, #4c1663);
    color: #fff;
   
                   
}
#container .box a:hover .img-cube img,
#container .box a.download:hover  img
{transform: scale(0.95,0.95);-webkit-transform:scale(0.95,0.95);-ms-transform-origin:scale(0.95,0.95);}

#container .box a img { transition: all 0.2s ease 0s; -moz-transition:all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; }
               

#container .box a:hover .desc-cube h4{ color: #fff}
.desc-cube{
    padding: 20px 20px;
    background: #d1d3d4 none;
    background: -webkit-gradient(linear, left top, right top, from(#d1d3d4), to(#a7a9ac));
    background: -webkit-linear-gradient(left, #d1d3d4, #a7a9ac);
    background: -moz-linear-gradient(left, #d1d3d4, #a7a9ac);
    background: -ms-linear-gradient(left, #d1d3d4, #a7a9ac);
    background: -o-linear-gradient(left, #d1d3d4, #a7a9ac);
    display: block;
    
    margin: 0;
   
}
.desc-cube h4,.desc-cube{ color: #333}
.desc-cube h4{ margin-top: 0; font-size: 20px; }
 .img-cube{ display: block; text-align: center;  background: #732588 none;}
 .img-cube img{ width: 100% }
 .download{ padding: 20px; margin-top: 20px; width: 300px }
 .download a{display: block;  color: #fff; background: url('../img/download.png') no-repeat 0px 0px; padding-left: 97px; line-height: 29px;}
 .download a:hover{ text-decoration: underline; color: #fff}
 .divider-div{margin: 2em 0 2em; clear: both}
 
 #go-top{ position: absolute;  right: 0}
 
 .footer{  padding: 35px 0 40px 0; color: #fff}
 .footer ul.menu,  .footer  ul.social{ list-style: none;margin: 0; padding: 0 0px 0 0; }
 
 .footer ul.menu li{padding: 5px 0px;}
 .footer ul.menu li a{ color: #fff; border-bottom: 1px solid #6b4585;  display: block; width: 150px;}
 
 .footer  ul.social li{float: left; margin-right: 8px;}
 .footer  ul.social li a{
    display: block;
    width: 64px;
    height: 64px;
    overflow: hidden;
    text-indent: -999px;
    margin-bottom: 5px;
 }
 .footer  ul.social li a:hover{ background-color: #6cbe10}
 .footer h4{ color: #fff; font-size: 16px;}
 .facebook{ background: url('../img/social-bottom-icons.png') 0px  0;}
 .twitter{   background: url('../img/social-bottom-icons.png') -69px 0;}
 .linkedin{   background: url('../img/social-bottom-icons.png') 67px 0;}
 .google{   background: url('../img/social-bottom-icons.png') 137px 0;}
 
 
 .share {  position: absolute; top: 20px; right: 0}
 .share .addthis_toolbox{     list-style: none; float: right; display: none}
 .addthis_toolbox li{ list-style: none; float: right}
.clickable{ float: right; display: block}

  .gray{ background: #e8e8e8; padding: 20px}
  .green{
        background: #6dc210 none;
        background: -webkit-gradient(linear, left top, right top, from(#6dc210), to(#62950e));
        background: -webkit-linear-gradient(left, #6dc210, #62950e);
        background: -moz-linear-gradient(left, #6dc210, #62950e);
        background: -ms-linear-gradient(left, #6dc210, #62950e);
        background: -o-linear-gradient(left, #6dc210, #62950e);
        color: #fff;
  }
  .purple{
       background: #732588 none;
    background: -webkit-gradient(linear, left top, right top, from(#732588), to(#4c1663));
    background: -webkit-linear-gradient(left, #732588, #4c1663);
    background: -moz-linear-gradient(left, #732588, #4c1663);
    background: -ms-linear-gradient(left, #732588, #4c1663);
    background: -o-linear-gradient(left, #732588, #4c1663);
  }
  
  .text{ padding:10px 20px 0px 20px ; line-height: 19px;  color: #fff}
  .text p:last-child{ padding-bottom: 20px; }
  .text h2,.text h4{ padding:8px 0px 0px 0; margin: 0;color: #fff; text-transform: uppercase }
  .text h3{  color: #fff;  font-size: 16px;  font-style: italic; margin: 0 0 8px 0;  color: #333}
  .text ul { list-style: none}
  .height{ height: 385px;}
 .copy{ margin-top: 20px; font-size: 12px; padding-left: 14px;}

 .mosaicflow__column { float:left; } 
#container{ padding: 20px  0px 0 10px}

#container .box{  margin: 0px 10px 10px 0; position: relative }
.box a{ display: block}
 /*
Title:   Responsive TABLETS ->>> you must have META VIEWPORT uncommented
Author:  http://themeforest.net/user/hogash // Marius Hogas */



/* iPads (landscape) // WITH META VIEWPORT ENABLED ----------- */
@media only screen 
and (max-width : 1024px) {
	/* body#me{background: #ff0000}*/
         .share{ top: 0; right: 0}
	.logo{ padding-left: 40px; padding-top: 0; }
        #container{ padding: 20px  0px 0 14px}
	#container .box{  margin: 0px 14px 10px 0; }
          .header-page{ background-image: url('../img/p_hbg.png');background-repeat:no-repeat;
background-size:cover;
background-position:90px 0px;}
          
         .header-title{text-align: center; margin-top: 10px; margin-bottom: 0; background: #fff }
          .header-home .header-title{ color: #66207b; text-shadow: none}
}
/* iPads (portrait) // WITH META VIEWPORT ENABLED ----------- */
@media only screen 
and (min-width : 481px) 
and (max-width : 768px) {
  
}

@media (max-width: 767px) {
   
   
       body#me .flexslider { width: 100% }
        body#me .slider{ overflow: hidden}
         body#me .flexslider .slides li img{
                width: 100%;
        }
         .header-home .header-title{text-align: center; margin-top: 0px; background: #fff; color: #66207b; text-shadow: none}
         .push-20{margin-bottom: 20px;}
       
	
}

@media only screen and  ( max-width: 481px )  /* 640px */
{   
    /* body#me{background: #ff00ff}*/
    body#me .flexslider { width: 100% }
        body#me .slider{ overflow: hidden}
         body#me .flexslider .slides li img{
                width: 500px    ;
        }
         .share{ background: #fff}
   
}