@charset "utf-8";
/* CSS Document */

.left { float:left;}
.right { float:right;}
.wrapper {width:100%; overflow:hidden;}
.relative{ position:relative;}
.centre { text-align:center; }
.clear { clear:both; }
.image_left { float:left; margin-right:10px; padding:3px; border:solid 1px #CCCCCC; }
.image_right { float:right; margin-left:10px; padding:3px; border:solid 1px #CCCCCC; }
.malayalam { font-family:jwala; font-size:15px;}

@font-face {
		font-family:'trebuc';
		src: url('trebuc.eot');
		src: url('trebuc.eot?#iefix') format('embedded-opentype'),
		url('trebuc.ttf') format('truetype'),
		url('trebuc.svg#ManoramaRegular') format('svg');
		font-weight: normal;
		font-style: normal;
		}

/* Global properties ======================================================== */

body { color:#3b3b3b; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:20px; margin:0px; outline:none; padding:0px; text-align:justify;}

a, a:hover { text-decoration:none; outline:none;}

body > header { width:100%; height:95px; background-color:#FFFFFF; box-shadow:0px 0px 3px 3px rgba(0,0,0,0.2); position:relative;}
body > header > div { width:997px; height:95px; margin:0px auto;}
#logo { width:235px; height:95px; float:left;}
#logo > img { margin-top:20px;}



nav { float:right; width:750px; height:95px;}
nav > ul { width:100%; height:95px; margin:0px; padding:0px; list-style:none;}
nav > ul > li { float:right; margin-left:1px;}
nav > ul > li > a { display:block; height:95px; line-height:95px; padding:0px 25px; font-family:trebuc; font-size:14px; text-transform:uppercase; color:#444444; border-top:solid 3px #FFFFFF;}
nav > ul > li > a:hover { background-color:#EBEBEB; border-top:solid 3px #5e2a96; color:#444444;}




#banner { width:100%; height:425px; border-bottom:solid 15px #5e2a96; background:url(../images/banner_02.jpg) no-repeat top center;}




.divisions { width:100%; min-height:255px; overflow:hidden; border-bottom:solid 15px #d9d9d9; }
.division {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#431573+0,7433b9+100 */
background: #431573; /* Old browsers */
background: -moz-linear-gradient(left,  #431573 0%, #7433b9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #431573 0%,#7433b9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #431573 0%,#7433b9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#431573', endColorstr='#7433b9',GradientType=1 ); /* IE6-9 */
min-height:250px; overflow:hidden; padding:0px 25px; font-size:14px; color:#FFFFFF; text-align:left;
}



#container { width:997px; height:auto; overflow:hidden; margin:25px auto;}




.column_01 { width:600px; height:auto; overflow:hidden;}
.column_02 { width:325px; height:auto; overflow:hidden;}


h1 { font-family:trebuc; font-size:35px; color:#FFFFFF; letter-spacing:normal;}
h2 { font-family:trebuc; font-size:30px; letter-spacing:normal; }
h3 { font-family:trebuc; font-size:20px; letter-spacing:normal; color:#5e2a96; background:url(../images/head_icon.jpg) no-repeat center left; padding-left:25px; border-bottom:dotted 1px #666666; line-height:35px; }
h4 { font-family:trebuc; font-size:25px; letter-spacing:normal; color:#5e2a96; line-height:35px; text-align:center; }
h5 { font-family:trebuc; font-size:22px; color:#FFFFFF; letter-spacing:normal;}


.readmore_01 { display:block; background-color:#FFFFFF; border:solid 1px #a090b7; border-radius:5px; width:150px; text-align:center; line-height:30px; font-family:trebuc; font-size:13px; color:#5e2a96;}
.readmore_01:hover { background-color:#DDDDDD;}

.readmore_02 { display:block; width:125px; height:28px; text-align:center; border-radius:5px; border:solid 1px #e4e4e4; font-family:trebuc; font-size:13px; color:#666666; line-height:28px; 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f4f4+0,d3d3d3+100 */
background: #f4f4f4; /* Old browsers */
background: -moz-linear-gradient(top,  #f4f4f4 0%, #d3d3d3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f4f4f4 0%,#d3d3d3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f4f4f4 0%,#d3d3d3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */
}

.readmore_02:hover { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f4f4+0,bababa+100 */
background: #f4f4f4; /* Old browsers */
background: -moz-linear-gradient(top,  #f4f4f4 0%, #bababa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f4f4f4 0%,#bababa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f4f4f4 0%,#bababa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#bababa',GradientType=0 ); /* IE6-9 */
}


.news { display:block; width:100%; height:80px;  border-bottom:dotted 1px #999999; margin-top:10px;}
#news_popup { width:100%; height:100%; left:0px; right:0px; top:0px; bottom:0px; position:fixed; background:url(../images/overlay.png) repeat top center; z-index:9999; display:none;}
#news_popup > div { width:600px; height:300px; left:0px; right:0px; top:0px; bottom:0px; position:absolute; border:solid 4px #000000; background-color:#FFFFFF; margin:auto; border-radius:10px;}
.news_head { background-color:#333333; color:#FFFFFF; line-height:35px; padding-left:5px; font-weight:bold; border-radius:5px 5px 0px 0px; font-size:14px;}
.news_matter { padding:15px;}


.director { border:solid 1px #CCCCCC; background-color:#E6E6E6; font-weight:bold; color:#000000; overflow:hidden; }
.director > img { padding:3px; border:solid 1px #999999; float:left; margin-right:15px; width:75px;}

.gal_cont { float:left; width:150px; height:100px; margin:8px; }
.gal_cont img { width:150px; height:100px;}


/*************************
********portfolio CSS*****
**************************/

#portfolio .container-fluid, 
#portfolio .col-sm-3  {
  overflow: hidden;
  padding: 0;
}

#portfolio .folio-item {
  position: relative;
}

#portfolio .overlay {
  background-color: #000;
  color: #fff; 
  left: 0;
  right:0;
  bottom:-100%;
  height: 0;
  position: absolute;
  text-align: center;
  opacity:0;  
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.overlay .overlay-content {
  display: table;
  height: 100%;
  width: 100%;
}

.overlay .overlay-text {
  display: table-cell;
  vertical-align: middle;
}

.overlay .folio-info {
  opacity: 0;
  margin-bottom: 75px;
  margin-top: -75px;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.overlay .folio-info h3 {
  margin-top: 0;
  color: #fff;
}

.folio-overview a {
  font-size: 18px;
  color: #333;
  height: 50px;
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  background-color: #fff;
  display: inline-block;
  margin-top: 20px;
  margin-right: 5px;
}

.folio-overview a:hover {
  color: #fff;
}

.folio-overview .folio-expand {
  margin-top: -500px;
  margin-left: -500px;
}

.folio-image, .folio-overview .folio-expand {
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

#portfolio .folio-item:hover .folio-image {
  -webkit-transform: scale(1.5) rotate(-15deg);
  transform: scale(1.5) rotate(-15deg);
}

.folio-image img {
  width: 100%;
}

#portfolio .folio-item:hover .overlay {
  opacity: 0.8;
  bottom: 0;
  height: 100%;
}

#portfolio .folio-item:hover .folio-overview .folio-expand {
  margin-top: 0;
  margin-left:0;
}

#portfolio .folio-item:hover .overlay .folio-info {
  opacity: 1;  
  margin-bottom:0;
  margin-top:0;
}


#single-portfolio {
  padding: 90px 0;
  background: #f5f5f5;
  position: relative;
}

#single-portfolio img {
  width: 100%;
  margin-bottom: 10px;
}

#single-portfolio .close-folio-item {
  position: absolute;
  top: 30px;
  font-size: 34px;
  width: 34px;
  height: 34px;
  left: 50%;
  color: #999;
  margin-left: -17px;
}


/*------------------Footer------------------*/

body > footer { width:100%; height:90px; background-color:#1e2223; text-align:center;}

.bottom_link, .bottom_link a { font-family:trebuc; font-size:13px; text-transform:uppercase; color:#7f7f7f; }
.bottom_link a:hover { color:#FFFFFF;}

.pro, .pro a { font-family:trebuc; font-size:11px; color:#7f7f7f; }
.pro a:hover { color:#FFFFFF;}