﻿/*=======================================================================================================================================
                                                                    Generic CSS
=======================================================================================================================================*/
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Poppins', sans-serif; font-weight:300;
    font-size: 1em;
}

/* Basic Common Column structure */
.width100{width:100%}
.margin_auto{margin:0px auto}
h1,h2,h3,h4,h5,h6{font-weight:normal;}

/* ========= Font Specific ========= */

.baloo-2-Medium-500 {
    font-family: "Baloo 2", sans-serif;
    font-optical-sizing: auto;
    font-weight:500;
    font-style: normal;
}


.tiny{font-size:0.8em}
.small{font-size:0.9em}
.regular{font-size:1.1em}
.semiMedium{font-size:1.3em;}
.medium{font-size:1.5em}
.large{font-size:2.4em}
.extra-large{font-size:2.6em;line-height:1.5}
.xx-large{font-size:3em;}

.light{font-family: 'Poppins', sans-serif !important; font-weight:300;}
.fontRegular{font-family: 'Poppins', sans-serif; font-weight:400;}
.semiBold{font-family: 'Poppins', sans-serif; font-weight:600;}
.bold{font-family: 'Poppins', sans-serif; font-weight:700;}
.upperCase{text-transform:uppercase}
.strike{ text-decoration:line-through}

/*float classes*/
.float_left{float:left;display:inline}
.float_right{float:right;display:inline}
.float_clear{clear:both;}

/*text alignment*/
.txtCenter{text-align:center;}
.txtRight{text-align:right !important;}
.txtLeft{text-align:left !important;}

/* padding */
.pad_3{padding:3px;}
.pad_5{padding:0.3em}
.pad_10{padding:0.6em}
.pad_14{padding:0.8em}
.pad_15{padding:0.9em}
.pad_20{padding:1.2em}
.pad_25{padding:1.5em}
.pad_30{padding:1.8em;}
.pad_40{padding:2.5em}
.pad_50{padding:3.1em}

.home_pad_offset{padding:1.8em;}

.pad_LR_30{padding:0 1.8em;}
.pad_L_15{padding-left:0.9em}
.pad_R_15{padding-right:0.9em}
.pad_LR_15{padding:0em 0.9em;}
.pad_LR_20{padding-left:1.2em;padding-right:1.2em}
.pad_LR_25{padding:0em 1.5em;}
.pad_LR_30{padding:0em 1.8em;}
.pad_L_30{padding-left:1.8em}
.pad_R_30{padding-right:1.8em}
.pad_TB_30{padding-bottom:1.8em;padding-top:1.8em}
.pad_TB_10{padding-bottom:0.6em;padding-top:0.6em}
.pad_TB_15{padding-bottom:0.9em;padding-top:0.9em}
.pad_TB_20{padding-bottom:1.2em;padding-top:1.2em}
.pad_TB_10{padding-bottom:0.6em;padding-top:0.6em}

/* margin */
.mrg_B_3{margin-bottom:0.18em;}
.mrg_B_5{margin-bottom:0.3em;}
.mrg_B_10{margin-bottom:0.6em;}
.mrg_B_15{margin-bottom:0.9em;}
.mrg_B_20{margin-bottom:1.2em;}
.mrg_B_25{margin-bottom:1.5em;}
.mrg_B_30{margin-bottom:1.8em;}

.mrg_R_15{margin-right:0.9em;}
.mrg_L_15{margin-left:0.9em;}

/*spacer*/
.space5{height:0.3em; display:block;}
.space10{height:0.6em; display:block;}
.space15{height:0.9em; display:block;}
.space20{height:1.2em; display:block;}
.space30{height:1.8em; display:block;}
.space35{height:2.1em; display:block;}
.space40{height:2.5em; display:block;}
.space50{height:3.1em; display:block;}
.space60{height:60px; display:block;}
.space70{height:70px; display:block;}
.space80{height:80px; display:block;}

/* coloumn structure*/
.col_1140{width:1140px;margin:0px auto}
.col_1_2{width:570px; float:left;}
.col_1_3{width:380px; float:left;}
.col_1_4{width:285px; float:left;}
.col_1_5{width:228px; float:left;}
.col_1_6{width:190px; float:left;}
.col_2_3{width:760px; float:left;}
.col_980{width:980px;}
.col_800_center{width:800px;margin:0px auto}
.col_800{width:800px; float:left}
.col_340{width:340px; float:left}

.col_800_right{width:800px; float:right;}
.col_340_right{width:340px; float:right;}

/*position*/
.posRelative{position:relative !important }

/*border-radius*/
.border_r_3{border-radius:3px;}
.border_r_4{border-radius:4px;}
.border_r_5{border-radius:5px;}
.border_r_50{border-radius:50%;}
.noBorder{border:none !important }

/*liner*/
.liner{height:1px; background-color:#000; display:block;}

/*text transform*/
.upperCase{text-transform:uppercase}
.capitalize{text-transform:capitalize;}
.txtDecNone{text-decoration:none;}

/* Notification */
.info, .success, .warning, .error {
margin: 10px 0px;
padding:12px;
padding-left:36px !important;display:block
}
.info {
    color: #00529B;
    background: #BDE5F8 url(../images/icons/ico-info.png) no-repeat 12px center;
}
.success {
    color: #4F8A10;
    background: #DFF2BF url(../images/icons/ico-success.png) no-repeat 12px center;
}
.warning {
    color: #9F6000;
    background: #FEEFB3 url(../images/icons/ico-warn.png) no-repeat 12px center;
}
.error {
    color: #D8000C;
    background: #FFBABA url(../images/icons/ico-error.png) no-repeat 12px center;
}

/*========================================================================================================================================
                                                                    Story Image CSS
========================================================================================================================================*/

*::selection{background:#a8cf45; color:#fff;}

/* Theme Colors */
.themeBgPrime{background:#a8cf45;} /* Light Green */
.themeBgSec{background:#ffcc29;} /* Orange */
.themeBgThr{background:#00a859} /* Green */
.themeBgQtr{background:#fff688} /* Yellow */

.themeClrPrime{color:#a8cf45;}
.themeClrSec{color:#ffcc29;}
.themeClrThr{color:#00a859;}
.themeClrQtr{color:#fff688;}

.bgGrey{background:#f9f7f5;}
.bgLightGrey{background:#f0f0f0;}
.bgWhite{ background:#ffffff }
.bgWooden{background:#b7a66d;}

.clrWhite{color:#fff;}
.clrBlack{color:#000;}
.clrLightGrey{color:#a1a0a0;}
.clrGrey{color:#8c8c8d;}
.clrDarkGrey{color:#545152;}
.bgBlack{background:#000;}
.bgF5{background:#f5f5f5;}


/* Text Style */
.paraTxt{color:#3e3e3e; line-height:1.5; font-size:1em;}
.subPara{line-height:1.5; font-size:1.3em;}
.line-ht-3{line-height:1.3;}
.line-ht-5{line-height:1.5;}
.line-ht-8{line-height:1.8;}
.letter-sp-2{letter-spacing:2px;}
.letter-sp-3{letter-spacing:3px;}

.disp-blk{display:block !important;}

.greyLine{background:#ccc; height:1px; width:100%; display:block; margin-top:25px; margin-bottom:25px;}

.dis-tbl{display:table;}
.tbl-cell{display:table-cell; vertical-align:middle;}

.shortLine{display:block; width:100%; height:3px; width:80px; margin-top:25px; margin-bottom:25px;}
.space3{height:3px; display:block;}
.space1{height:1px; display:block;}

/* Header */
.topGradLine{background:linear-gradient(to right, #6412a3, #9f1ca6, #c20f9e, #6412a3, #c20f9e, #c20f9e); width:100%; display:block; height:3px; display:none;}
#header{}
.logo{display:inline-block;}

.socialBox{position:absolute; left:15px; bottom:10px;}
.topFb, .topTwt, .topyouTube, .topInsta{transition:0.5s;}
.topFb:hover, .topTwt:hover, .topyouTube:hover, .topInsta:hover{transform:translateY(-5px);}
.topFb{background:url("../images/icons/topFb.png") no-repeat center center; width:24px; height:24px; margin-right:15px; display:inline-block;}
.topTwt{background:url("../images/icons/topTwitter.png") no-repeat center center; width:24px; height:24px; margin-right:15px; display:inline-block;}
.topyouTube{background:url("../images/icons/topYoutube.png") no-repeat center center; width:24px; height:24px; margin-right:15px; display:inline-block; }
.topInsta{background:url("../images/icons/topInsta.png") no-repeat center center; width:24px; height:24px; display:inline-block;}


.topCall{background:url("../images/icons/callTop.png") no-repeat left center; text-decoration:none; padding-left:30px; color:#f1f1f1; line-height:1.5; position:absolute; bottom:15px; right:15px; font-size:1.1em; font-weight:400}

/* Navigation */
#mobNav{display:none;}
/*#topNavPanel{background:linear-gradient(to right, #6412a3, #c20f9e); width:100%; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; transition:0.5s;}*/
#topNavPanel{background:#000; width:100%; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; transition:0.5s;}
#topNav{list-style:none; text-align:center;}
#topNav li{display:inline; position:relative;}
#topNav li a{font-family: 'Poppins', sans-serif; font-weight:400; display:inline-block;text-decoration:none;color:#fff; font-size:1em;line-height:1.5;padding:12px 15px}
#topNav li a.subNav{background:url(../images/icons/navArrow.png) no-repeat right center;padding-right:23px!important; cursor:pointer;}
#topNav li a.subNav-right{background:url(../images/icons/navArrow-right.png) no-repeat right center;cursor:pointer;}
#topNav li a:hover{background-color:#fb7801; color:#000;}

#navBtn{width:34px;height:34px;background:url(../images/icons/nav-btn.png) no-repeat left center;display:none; cursor:pointer; position:absolute; top:70px; right:50px;}

#topNav ul{position:absolute; display:none; top:35px; left:0px; background:#fff; border-bottom:3px solid #601165; box-shadow:3px 2px 15px rgba(0,0,0,0.4);}
#topNav ul li{display:block; text-align:left;}
#topNav ul li a{font-family: 'Poppins', sans-serif; font-weight:400; display:inline-block;text-decoration:none;color:#000;padding:6px 10px;width:150px;font-size:0.9em;}
#topNav ul li a:hover{color:#c20f9e !important; background:transparent;}
#topNav li:hover > ul{display:block; z-index:3;}

.closeBtn{position:absolute; top:5px; right:25px; font-size:36px; color:#fff; text-decoration:none; display:none;}

/* Banner */
#banner{background:url("../images/banner/banner-1.jpg") no-repeat fixed center; width:100%; height:600px; background-size:cover;}
/*.bannerText{background:linear-gradient(120deg, #a8cf45, #00a859); width:100%; animation: color-rotate 10s linear infinite;}*/
/*.bannerText{background:linear-gradient(120deg, rgba(168,207,69,0.7), rgba(0,168,89,0.7), rgba(99,137,1,0.7) ); width:100%; background-size:400%; animation: bganimation 15s infinite}*/
.bannerText{background:rgba(59,101,84,0.8); width:100%; background-size:400%; animation: bganimation 15s infinite}
.bannerText h2{font-weight:700; font-size:3.5em; color:transparent;color:#fff;}
    .bannerText .subText {
        font-weight: 700;
        font-size: 2.1em;
        color: #bcd800;
        display: block;
        line-height: 1.1em
    }

@keyframes bganimation{
    0%
    {
        background-position: 0% 50%;
    }
    50%
    {
        background-position: 100% 50%;
    }
    100%
    {
        background-position: 0% 50%;
    }
}
.col_600_center{width:600px; margin:0 auto;}

/* About Us */
.bigFont{font-size:3.6em;}
.textShadow{text-shadow:3px 5px 8px rgba(0,0,0,0.3);}
.width80{width:90%; display:inline-block;}
.absAbtImg{position:absolute; right:0; bottom:-60px; width:50%;}

.basicList{list-style-image:url('../images/icons/dot.png'); margin-left:15px;}
.basicList li{padding:3px; font-size:1em; color:#545152; line-height:1.5;}

.basicListRight{list-style:none;}
.basicListRight li{padding:3px 18px 3px 3px; font-size:1em; color:#545152; line-height:1.5; background:url('../images/icons/dot.png') no-repeat right 12px; }

.whiteList{list-style-image:url('../images/icons/white-dot.png'); margin-left:15px;}
.whiteList li{padding:3px; font-size:1em; color:#fff; line-height:1.5;}

/* Profiles */
.bgProfile{background:url("../images/profileBg.jpg") no-repeat fixed center; background-size:cover; width:100%;}

/* Exhibition */
.bgExhibition{background:url("../images/habitat-exhibition.jpg") no-repeat fixed center; background-size:cover; width:100%;}
.exhibitionOverlay{background:rgba(0,0,0,0.7);}
.width30{width:30%; float:left;}

.absTopArrow{position:fixed; bottom:15px; right:20px;}
.fixedArrow{background:url("../images/icons/topIco.png") no-repeat center center; display:block; height:48px; width:48px;}
.topArrowIco{}

/* Gallery */
.width25{width:25%; float:left;}
.absImg{position:absolute; top:-5px; left:0;}
.width50{width:50%; float:left;}

.absHt{height:208px; display:block;}

/*background: linear-gradient(to right, #6412a3, #9f1ca6, #c20f9e, #6412a3, #c20f9e, #c20f9e);*/
.gradientText{background: linear-gradient(to right, #00a859, #00a859, #a8cf45, #a8cf45, #00a859, #ffcc29); -webkit-text-fill-color:transparent;  -webkit-background-clip:text;  z-index:1; overflow:hidden;}
 
/* Footer */
.footer{background-color:#121212; width:100%;}
.footer span{display:block;}
.footerCaption{font-size:1.4em; line-height:1.5;}
.footerNav{list-style:none}
.footerNav li{display:inline}
.footerNav li a{text-decoration:none; font-weight:400; display:inline-block;padding:0 15px;color:#a1a0a0;font-size:1em; line-height:1.3;}
.footerNav li a:hover{color:#a8cf45;}
.pad_L_0{padding-left:0px !important;}
.footerNav li:last-child a{padding-right:0;}
.noBorder{border:none !important}
.footerLiner{background-color:#333333; height:1px; display:block; }
.intellect{text-decoration:none; font-weight:600; color:#a1a0a0}
.intellect:hover{color:#a8cf45;}
.copyRight{color:#a1a0a0;}

.socialIco{display:inline-block; width:32px; height:32px; margin-right:20px;}
.fb, .twt, .youTube, .insta{ -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; transition:0.5s;}
.fb:hover, .twt:hover, .youTube:hover, .insta:hover{transform:translateY(-8px);}
.fb{background:url("../images/icons/fb.png") no-repeat center center;}
.twt{background:url("../images/icons/twt.png") no-repeat center center;}
.youTube{background:url("../images/icons/youtube.png") no-repeat center center;}
.insta{background:url("../images/icons/insta.png") no-repeat center center;}


/*Form Controls*/
.w100{width:100%;}
.labelCap{ font-weight:600; padding:5px 15px 5px 0px; display:block; margin-bottom:0.3em }
.subNotice{font-size:0.8em; color:#999999; font-style:italic; margin-bottom:15px; display:block}
.textBox{padding:0.5em; display:block; border-bottom:1px solid #ccc; color:#000; resize:none; width:97%; background:transparent;}
.textBox:focus{outline:none; border-bottom:1px solid #a8cf45;}
.cmbBox{padding:0.5em; border:1px solid #cccccc; display:block; resize:none; width:98%}
.cmbBox:focus{outline:none; border:1px solid #6412a3;}
.w50{width:50%}
.w20{width:20%}
/*.w30{width:31%; display:inline-block;}*/
.w30{width:31%; float:left;}
.w80{width:80%}
.w90{width:90%}
.w95{width:95%}
.w98{width:98%}
.w70{width:70%; margin:0 auto;}
.app_r_padding{padding-right:1.8em}
.chkList{width:100%}
.chkList input{padding:8px; margin-bottom:10px; display:inline-block;}
.buttonForm{background-color:#545152; color:#fff; font-size:1em; padding:10px 18px; cursor:pointer; -webkit-transition:all 0.7s ease; transition:all 0.7s ease;}
.buttonForm:hover{background:#000;}

/* Contact Info - Home */
.addr{background:url("../images/icons/location.png") no-repeat top left; display:block; padding-left:34px;}
.email{background:url("../images/icons/mail.png") no-repeat top left; display:block; padding-left:34px; }
.call{background:url("../images/icons/call.png") no-repeat top left; display:block; padding-left:34px;}
.breakWord{word-wrap:break-word;}

.imgBorder{border:1px solid #dbd9d9;}
.imgBorder:hover{border:1px solid #a8cf45;}

.fixBrochure{position:fixed; right:-60px; top:40%; text-decoration:none; background:linear-gradient(to right, #ff7900, #c16b13); padding:10px; color:#fff; font-size:0.9em; font-weight:400; transform:rotate(-90deg); box-shadow:-5px -3px 15px rgba(0,0,0,0.3); z-index:1;}


/*================================================== Media Queries ==================================================*/

@media screen and (max-width: 1600px)
{
}
@media screen and (max-width: 1200px)
{
    .email{word-wrap:break-word;}
    .col_1140{width:95%}
	.col_1_2{width:50%}
	.col_1_3{width:33%}
	.col_2_3{width:67%}
	.col_1_4{width:25%}
	.col_1_5{width:20%}
    .col_1_6{width:16.5%}
	.col_800{ width:70%}
	.col_340{ width:30%}

    #banner{height:375px;}
    .absHt{height:172px; display:block;}
}
@media screen and (max-width: 1140px)
{
	.col_1140{width:95%}
	.col_1_2{width:50%}
	.col_1_3{width:33%}
	.col_2_3{width:67%}
	.col_1_4{width:25%}
	.col_1_5{width:20%}
	.col_1_6{width:16.5%}
	.col_800{width:70%}
	.col_340{width:30%}
    .col_600_center{width:70%;}

    .col_800_right{width:70%;}
	.col_340_right{width:30%;}

    #navBtn, #mobNav{display:block;}
    #topNavPanel{position:fixed; top:0; right:0; width:0; height:100%; z-index:1; background:rgba(0,0,0,0.9); overflow-x:hidden;  overflow-y:scroll; border-top:4px solid #a8cf45}
    #topNav{list-style:none; margin-top:60px;}
    #topNav li{display:block; position:relative; text-align:left !important;}
    #topNav li a{font-family: 'Poppins', sans-serif !important; font-size:1.2em !important; padding:8px 30px !important; line-height:1 !important; text-decoration:none; background:transparent; display:block; border:none !important; font-weight:400; color:#fff; font-size:1em; line-height:1.5; padding:5px 20px;}
    #topNav li a:hover{color:#a8cf45; background:transparent;}

    #topNav ul{position:relative; top:0px; left:18px;display:block; background:transparent !important; border:none !important; box-shadow:none !important;}
    #topNav ul li{border:none !important; }
    #topNav ul li a{display:block; width:100%; padding:5px 0px 1px 10px; font-size:0.9em; line-height:1.3; color:#fff !important;background:transparent;text-align:left; }
    #topNav ul li a:hover{background:transparent !important; text-decoration:underline; color:#fff !important;}

    .closeBtn{display:block;}

    #banner{height:356px;}
    .absHt{height:164px; display:block;}
}
@media screen and (max-width: 1024px)
{
    .col_980{width:100%;}

    #banner{height:320px;}
    .absHt{height:146px; display:block;}
}
@media screen and (max-width: 920px)
{   
    .col_800{width:100%; float:none }
	.col_340{width:50%; float:none;}
    .col_800_center{width:100%;}
    .col_600_center{width:100%;}
    
    .col_800_right{width:100%; float:none; margin-top:30px;}
	.col_340_right{width:50%; float:none; margin-top:30px;}
    
    .pad_L_30{padding-left:0; margin-top:30px;}

    #banner{height:288px;}
    .w30{width:49%;}

    #about .col_1_2{width:100%; float:none;}
    #hInfo{margin-top:80px;}
    #contact .width50{width:100%; float:none;}

    .bgProfile .col_1_3{width:100%; float:none;}
    .bgProfile .txtRight{text-align:left !important;}
    .bgProfile .float_right{float:left;}
    .basicListRight li{padding:3px 3px 3px 18px; background:url('../images/icons/dot.png') no-repeat left 10px; }
}
@media screen and (max-width: 860px)
{
    #banner{height:269px;}
}
@media screen and (max-width: 800px)
{
    .col_1_2, .col_1_3, .col_1_4, .col_1_5, .col_1_6, .col_2_3{width:100%; float:none;}

    #banner{height:250px;}
    .absHt{height:110px; display:block;}

    #exhibition .col_1_4{width:50%; float:left;}
}
@media screen and (max-width: 768px)
{
    .socialBox, .topCall{display:none;}
    .logo{text-align:left !important; display:block;}
    #navBtn{top:100px; padding:0; right:20px;}
    #exhibition .width30{width:100%; float:none;}
}
@media screen and (max-width: 640px)
{   
    .col_1_3{width:100%}
	.col_2_3{width:100% }

    .w50, .w30, .w20{width:100%;}
	.app_r_padding{padding:0em !important}
    .textBox{width:93.7%;}
    .conTxtBox{width:90%;}
    .cmbBox{width:93.7%;}

    #banner{height:200px;}

    .col_340{width:100%;}

    #copyright .float_right, #copyright .float_left{float:none; display:block; text-align:center; line-height:1.8;}
    #gallery .width25{width:50%;}
    .absHt{height:380px; display:block;}
}
@media screen and (max-width: 560px)
{
    .absHt{height:328px; display:block;}
}
@media screen and (max-width: 480px)
{	
    .home_pad_offset{padding:0.6em;}
    #banner{height:150px;}
    .footerNav li a{margin-bottom:8px;}

    #about{text-align:center;}
     #gallery .width25{width:100%; float:none;}
     .absImg{position:static;}
     .absHt{height:0px; display:block;}

     #exhibition .col_1_4{width:100%; float:none;}
}
@media screen and (max-width: 414px)
{
   .footerNav li{display:block;}
   .footerNav li a{padding:1px 0;}
}
@media screen and (max-width: 375px)
{
    .conTxtBox{width:75%;}
}
@media screen and (max-width: 360px)
{
    .xx-large{font-size:2.1em;}

    #banner{height:113px;}
}
@media screen and (max-width: 320px)
{
    
}

