@import url('https://fonts.googleapis.com/css?family=Ubuntu');

body{
font-family: 'Ubuntu', sans-serif;
}

.nav-pills > li{
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
	 	width:200px;
		font-size:18px;
		
}

.nav-pills li a{
	color:#10613f;
}

.nav-pills > li a:hover{
    background-color:transparent;
}

.nav-pills .active a{
	background-color:transparent !important;
border-bottom:3px solid #5cb85c;	
color:green !important;
border-radius:0px;
}

.nav-pills{
    text-align:center;
}


.imgstyle1{
	width:50%;	
}

@media screen and (max-width:420px){
		.imgstyle1{
			width:26%;
		}
}

.spacing{
    line-height: 42px;
}


.navbar-default{
    background: white;
}
.nav-item{
    font-size: 16px;
    background: #10613f;
    margin: 5px;
    
}
.nav-item >a {
    color: white !important;
}

.nav-item:hover{
    background:#5DBA53 ;
}

.nav1{
    min-height: 250px;
    padding-top: 8px;	


    text-align: center;
    font-family: Tunga;
}

.gcard{
    border: 1px solid cyan;
    border-radius:7px;
    padding: 10px;
}

.gcard h4{
line-height:35px;	
}

.gcard:hover >img{
    transition:ease 1s;
    transform: scale(1.05);
}
.pad{
    padding-left: 20px;
}
.text{
  font-size:72px;
 font-family: 'Ubuntu', sans-serif;
  color:#57312B;
}
.fcard{
    border: 5px solid #F9AA75;
    border-radius:15px;
    padding: 10px;
    }
    .fcard:hover{
       background-color:#fff1d3;
        }
        .card2{
    background:white;
    box-shadow: 0px 5px 10px #ababab;
    margin: 10px;
}

.text1{
	margin-top:30px;
	 font-family: 'Ubuntu', sans-serif;
	 font-size:16px;
	 line-height:26px;
}

.text1 h4{
	
}


hr{
    height: 1px;
    background: orange;
}
hr:after{
    font-family: FontAwesome;
    content: "\f10c";
    display: inline-block;
    position: relative;
    top: -0.7em;
    left: 48%;
    color: green;
    font-size: 1.5em;
    padding-left: 1%;
    padding-right: 1%;
    background: white;
}

.card{
    background: rgb(256,256,256);
    box-shadow: 0px 5px 10px #ababab;
    margin: 10px;
}
.card1{
   font-family: 'Ubuntu', sans-serif;
    box-shadow: 0px 5px 10px #ababab;
    margin: 10px;
}
.gcard1{
    
    font-family: 'Ubuntu', sans-serif;
    padding: 10px;}
.hover:hover{background-color:#fffaa0;}
.textcolor{color:#ffffff;}




.backimgfoot-nav{
    background-image: url("../images/Green Block 2.png");
    background-size: cover;
}

.backimg{
    background-image:url("../images/green veves.png");
    background-repeat:no-repeat;
    background-position: bottom right;
}


.backimg1{
    background-image: url("../images/Green patch 2.png");
    background-repeat:no-repeat;
    background-position:top right;
}


.shine_me{
    cursor:pointer;
    margin-bottom:10px;
}

.shine_me:hover .shine_effect {
    /*   positioning */
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    /*   gradient   */
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(1%, rgba(255, 255, 255, 0.03)), color-stop(30%, rgba(255, 255, 255, 0.85)), color-stop(50%, rgba(255, 255, 255, 0.85)), color-stop(70%, rgba(255, 255, 255, 0.85)), color-stop(71%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
    /* IE6-9 */
    /*  forming the shine element
        play around with the width, skew and gradient to get different effects
    */
    width: 15%;
    height: 100%;
    transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    -moz-transform: skew(-10deg, 0deg);
    -ms-transform: skew(-10deg, 0deg);
    -o-transform: skew(-10deg, 0deg);
    /*  animating it  */
    animation: move 2s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
    -webkit-animation: move 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 1s;
    -moz-transform: skew(-10deg, 0deg);
    -moz-animation: move 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 1s;
    -ms-transform: skew(-10deg, 0deg);
    -ms-animation: move 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-delay: 1s;
    -o-transform: skew(-10deg, 0deg);
    -o-animation: move 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-delay: 1s;
}

/*  */
@keyframes move {
    0% {
        left: 0;
        opacity: 0;
    }
    5% {
        opacity: 0.0;
    }
    48% {
        opacity: 0.2;
    }
    80% {
        opacity: 0.0;
    }
    100% {
        left: 82%;
    }
}
@-webkit-keyframes move {
    0% {
        left: 0;
        opacity: 0;
    }
    5% {
        opacity: 0.0;
    }
    48% {
        opacity: 0.2;
    }
    80% {
        opacity: 0.0;
    }
    100% {
        left: 82%;
    }
}
@-moz-keyframes move {
    0% {
        left: 0;
        opacity: 0;
    }
    5% {
        opacity: 0.0;
    }
    48% {
        opacity: 0.2;
    }
    80% {
        opacity: 0.0;
    }
    100% {
        left: 88%;
    }
}
@-ms-keyframes move {
    0% {
        left: 0;
        opacity: 0;
    }
    5% {
        opacity: 0.0;
    }
    48% {
        opacity: 0.2;
    }
    80% {
        opacity: 0.0;
    }
    100% {
        left: 82%;
    }
}
@-o-keyframes move {
    0% {
        left: 0;
        opacity: 0;
    }
    5% {
        opacity: 0.0;
    }
    48% {
        opacity: 0.2;
    }
    80% {
        opacity: 0.0;
    }
    100% {
        left: 82%;
    }
}


/* -------------------SLIDE ANIMATION ----------------------------*/

.slideanim {visibility:hidden;}
.slide1 {
    /* The name of the animation */
    animation-name: slide1;
    -webkit-animation-name: slide1; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide1 {
    0% {
        opacity: 0;
        transform: translateY(40%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0%);
    } 
}
@-webkit-keyframes slide1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}


/*-------Slide Animmation 2--------------*/

.slideanim2 {visibility:hidden;}
.slide2 {
    /* The name of the animation */
    animation-name: slide2;
    -webkit-animation-name: slide2; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide2 {
    0% {
        opacity: 0;
        transform: translateX(30%);
    } 
    100% {
        opacity: 1;
        transform: translateX(0%);
    } 
}
@-webkit-keyframes slide2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(30%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}


/*-------Slide Animmation 3--------------*/

.slideanim3 {visibility:hidden;}
.slide3 {
    /* The name of the animation */
    animation-name: slide3;
    -webkit-animation-name: slide3; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide3 {
    0% {
        opacity: 0;
        transform: translateX(-30%);
    } 
    100% {
        opacity: 1;
        transform: translateX(0%);
    } 
}
@-webkit-keyframes slide3 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-30%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}


/*----------------------FOOTER ------------------------*/

.fblock{
	background-color:#268c52;
}

.fblock1{
	padding-top:30px;
	color:white;
}

.fblock1 h4{
	margin-left:265px;
}

.fblock img{
	float:left;
	width:50%;
	padding-left:50px;
	padding-right:20px;
	transition: all 500ms;
}

.fblock img:hover {
	transform:scale(1.2);
}

.fblock2 ul,.fblock3 ul {
	list-style-type:none;
}

.fblock3{
	padding:20px;
}
.fblock2{
	padding:20px;
}


.fblock2 li a, .fblock3 li{
	text-decoration:none;
	font-size:17px;
	color:white;
}

.fblock3 li{
	font-size:16px;
	border-left:1px solid grey;
}

.fblock2 li, .fblock3 li{
	padding:8px;
}

.fblock2 li a:hover{
	color:#373435;
}

.fblock .glyphicon{
	font-size:20px;
	color:#F6E1B3;
}


@media screen and (max-width:380px){
	.fblock img{
		padding-left:10px;
}

.fblock1{
	border-bottom:1px solid grey;
	padding-bottom:30px;
}

.fblock1 h4{
	margin-left:150px;
}