/* 
    Document   : style
    Created on : 27 Aug, 2014, 6:00:08 PM
    Author     : Aldon
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}
/*
@font-face { 
    font-family: 'regular1'; 
    src: url('../font/Theano/Theano.ttf'); 
    src: url('../font/Theano/Theano.ttf?#iefix') format('embedded-opentype'),
         url('../font/Theano/Theano.ttf') format('ttf'),url('../font/Theano/Theano.ttf');
}*/
@font-face { 
    font-family: 'regular1'; 
    src: url('../font/aleo/aleo.ttf'); 
    src: url('../font/aleo/aleo.eot?#iefix') format('embedded-opentype'),
         url('../font/aleo/aleo.ttf') format('ttf'),url('../font/aleo/aleo.ttf');
}
@font-face { 
    font-family: 'regular'; 
    src: url('../font/azedo/azedo.otf'); 
    src: url('../font/azedo/azedo.eot?#iefix') format('embedded-opentype'),
         url('../font/azedo/azedo.otf') format('otf'),url('../font/azedo/azedo.otf');
}
@font-face { 
    font-family: 'cursive1';
    src: url('../font/cursive/cursive4.ttf'); 
    src: url('../font/cursive/cursive4.ttf?#iefix') format('embedded-opentype'),
         url('../font/cursive/cursive4.ttf') format('ttf'),url('../font/cursive/cursive4.ttf');
}
root { 
    display: block;
}
body,html
{
    width:100%;
    height: 100%;
    padding:0px;
    text-align: center;
    font-family:regular;
    color:#444;
    background: #fdfdfd;
}
header
{
    height:100%;
    background:url('../images/landing.jpg');
    background-size: auto 140%;
    background-position: 50% 0%;
    background-attachment:fixed;
    min-height: 550px;
    display: block;
    position: relative;
}
header h1
{
    font-family:regular;
    color:#fff;
    font-size:8em;
    position: relative;
    top:18%;
    display: block;
    height:1.35em;
    line-height: 2em;
    width:100%;
}
header h2
{
    font-family:cursive1;
    position: relative;
    font-size: 3.25em;
    top:50%;
    color:#5fd35f;
    width:100%;
    height:70px;
    line-height: 70px;
    margin:auto;
    margin-top:-1.25em;
}
header h2 span
{
    margin:5px;    
    margin-left: 10px;
    margin-right: 10px;
    padding:5px;
    border-radius: 0px;
}
header #social
{
    height:auto;
    width:400px;
    max-width: 95%;
    display: block;
    position: absolute;
    bottom:4%;
    text-align: left;
    margin:auto;
    margin-left: 2.5%;
}
header .social
{
    height:50px;
    width: 50px;
    display: inline-block;
    background: rgba(255,255,255,0);
    border-radius: 50%;
    border:2px solid #5fd35f;
    margin:30px;
    margin-left: 0px;
    margin-top:0px;
    margin-bottom: 0px;
}
header .social img
{
    width:75%;
    margin:auto;
    top:10%;
    left:10%;
    position: relative;
}
header #logo
{
    height:150px;
    position: absolute;
    bottom:.5%;
    right:.5%;
    padding:0px;
    border:none;
}
header #menu
{
    width: 700px;
    height:auto;
    top:0%;
    display: block;
    position: absolute;
    right:0;
    margin:0px;
    text-align: right;
}
header #menu li
{
    font-family:regular;
    height:75px;
    width:auto;
    text-align: center;
    line-height: 75px;
    display: inline-block;
    color:#ddd;
    margin-left:20px;
    margin-right: 20px;
    cursor: pointer;
    font-size: 1.75em;
    -webkit-transition: all .5s;
    -moz-transition: all .5s  ; 
    -o-transition: all .5s  ; 
    -ms-transition: all .5s  ;
}
header #menu li:hover
{
    color:#5fd35f
}
/*End of Header. Start of Page Content*/

.page
{
    height:100%;
    width:100%;
    display:block;
    margin:auto;
    position: relative;
}
#menu1
{
    width:100%;
    box-shadow: 0px 0px 1px #444;
    height:60px;
    background: #eee;
    bottom:-61px;
    left:0px;
    z-index: 10;
    position: fixed;
    -webkit-transition: all .5s;
    -moz-transition: all .5s  ; 
    -o-transition: all .5s  ; 
    -ms-transition: all .5s  ;
}
#menu1 .shift
{
    height:120px;
    width:60px;
    position: absolute;
    background:url(../images/graphic/shift.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 50% 100%;
    top:0%;
    margin-top:-120px;
    border-bottom: 1px solid #eee;
    right:5%;
    margin-right: -30px;
    padding:0px;
    cursor: pointer;
}
#menu1:hover
{
    bottom:0px
}
#menu1 ul
{
    height:60px;
    width:100%;
    margin:0;
    padding:0;
    left:0;
}
#menu1 ul li
{
    margin:0;
    padding:0;
    color:#4fc34f;
    width:19%;
    vertical-align: top;
    display: inline-block;
    margin:auto;
    font-family: regular;
    margin-left:-0.35%;
    line-height: 50px;
    cursor: pointer;
    text-align: center;
    font-size: 1.75em;
}
#menu1 ul .logo
{
    height:60px;
    width:auto;
    background:url('../images/icons/logo1.svg');
    background-size: 90% auto;
    background-repeat: no-repeat;
    background-position: 50% 20%;
    display: none;
    
}
#menu1 ul .logo img
{
    width:90%;
    margin:5%;
    vertical-align: central;
    display: block;
}
#menu1 ul .li_social
{
    width:12.5%;
    height:60px;
    margin-top:20px;
    display: none;
    text-align: center;
}
#menu1 ul .li_social img
{
    width:22.5%;
    display: inline-block;
    margin:3%;
    max-width: 50px;
}
#d_hide
{
    z-index: 8;
    height:100%;
    width:100%;
    position: fixed;
    display: none;
    top:0;
    left:0;
    background: rgba(0,0,0,0.85);
}
#overlay
{
    width:100%;
    height:100%;
    overflow: hidden;
    position: absolute;
    -webkit-transition: all .75s;
    -moz-transition: all .75s  ; 
    -o-transition: all .75s  ; 
    -ms-transition: all .75s  ;
}
.initial
{
    z-index: -1;
    opacity: 0;
}
.final
{
    z-index: 9;
    opacity: 1;
}
#overlay #overlay_cont
{
    height:auto;
    width:100%;
    overflow: auto;
    background: #fdfdfd;
    margin:auto;
}
#overlay .exit
{
    height:40px;
    width:40px;
    font-family: regular;
    text-decoration: none;
    font-size: 30px;
    border:1px solid #4fc34f;
    border-radius: 50%;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    padding:0;
    color:#4fc34f;
    position: absolute;
    right:25px;
    top:5px;
}
#overlay .read {display:none;}
#overlay h2
{
    margin-bottom:10px;
    display: inline-block;
    width:100%;
    margin-top:0;
    padding-top:0;
    padding-bottom: 50px;
    font-family: regular;
    color:#4fc34f;
    font-size: 2.5em;
}
#overlay img
{
    width:auto;
    max-height: 500px;
    height:auto;
    margin:auto;
    margin-bottom: 50px;
    margin-top:0px;
    display: block;
    border-radius: 5px;
    box-shadow: 0px 0px 2px #000;
}
#overlay p
{
    font-size: 1.1em;
    line-height: 25px;
    font-family: regular1;
    padding:5%;
    padding-right: 2%;
    text-align: right;
    margin:auto;
    margin-top:20px;
    margin-bottom: 100px;
    padding-top:0;
    padding-bottom: 0;
    color:#555;
}
#overlay h3
{
    text-align: left;
    font-size: 1.25em;
    padding-bottom: 10px;
    font-family: regular1;
    color:#4fc34f;
}
.content
{
    text-align:justify;
    padding:30px;
    padding-top:0;
}
#overlay ul
{
    list-style: inside circle;
    padding-top:10px;
    padding-bottom: 10px;
}
/*End of Header. Start of Page1*/
#page1
{
    display: block;
    position: relative;
    height:auto;
}
#page1 #description
{
    min-height: 600px;
    height:auto;
    margin:auto;
    position: relative;
    display: block;
    width:100%;
}
#page1 .head
{
    height:120px;
    padding:0px;
    margin:0px;
    line-height: 80px;
    font-family: regular;
    color:#4fc34f;
    font-size:5em;
    margin-bottom: 20px;
}
#page1 .head1
{
    height:140px;
    padding:0px;
    margin:0px;
    line-height: 140px;
    font-family: regular;
    color:#4fc34f;
    font-size:5em;
    margin-bottom: 40px;
}
#page1 .head2
{
    font-family: regular;
    border-top:1px solid rgba(0,0,0,0.1);
    font-size: 3em;
    color:#4fc34f;
    padding-top:40px;
    margin-bottom: 25px;
}
#page1 .head2 span
{
    font-family: calibri;
    margin-right:20px;
    margin-left:20px;
}
.break
{
    height:50px;
    line-height: 50px;
    display: block;
    margin:auto;
    font-size: 1.25em;
    color:#888;
    text-align: center;
}
.break img
{
    display: inline-block;
    height:40px;
    margin-left:15px;
    margin-right: 15px;
    vertical-align: top;
}
.page .content1
{
    max-width: 1440px;
    color:#555;
    margin:auto;
    margin-top:20px;
    text-align: justify;
    line-height: 25px;
    width:90%;
    margin-bottom: 100px;
    font-size: 1.15em;
    font-family: regular1;
}
.page .content2
{
    max-width: 1440px;
    margin:auto;
    margin-top:30px;
}
.page .buffer
{
    background:url('../images/buffer.jpg');
    background-size: 110% auto;
    background-position: 50% 0%;
    background-color: transparent;
    background-attachment: scroll;
    width:100%;
    max-width: 100%;
    padding-bottom: 30px;
}
.page .buffer #buf_h1,.page #ctc_h1
{
    background: transparent;
    border-top:none;
}
.page ol
{
    margin-top:10px;
    display: block;
    margin-bottom: 30px;
}
.ol_main li span
{
    font-family: cursive1;
    font-size: 2em;
    border-top:1px solid rgba(255,255,255,0.225);
    padding-top:35px;
    color:#4fc34f;
    display: block;
    width:auto;
    text-indent: 10px;
    margin:auto;
    margin-bottom: 35px;
}
.ol_main li 
{
    margin-bottom: 20px;
    line-height: 25px;
    color:#555;
}
.ol_main
{
    margin:auto;
    max-width: 98%;
    text-align:left;
    list-style: none;
}
.page .headimg
{
    height:130px;
    display: block;
    margin:auto;
    margin-top:30px;
    border-radius: 50%;
    background: #5fd35f;
    margin-bottom: 50px;
}
#logo2
{
    background:transparent;
    border-radius: 0;
    margin:0;
    margin-left:auto;
    margin-right: auto;
    height:200px;
}
#page1 #description h1 img
{
    position: relative;
    width:100px;
    top:25px;
    border-radius: 50%;
    vertical-align: top;
    display: inline-block;
    margin-right:2.5%;
}
#page1 .box
{
    width:23%;
    max-width: 95%;
    min-width: 250px;
    margin:.5%;
    padding-top:0px;
    margin-top:0px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    height:auto;
}
#page1 .box h2
{
    font-family: regular;
    margin:0;
    margin-top:20px;
    text-align: center;
    padding:10px;
    padding-top:0px;
    padding-bottom: 30px;
    line-height:50px;
    font-size: 30px;
    color:#eee;
    border-bottom:1px solid #4fc34f;
}
#page1 .box img
{
    border-radius: 50%;
    background:#4fc34f;
    width:40%;
}
#page1 .box p
{
    margin-top:0px;
    text-align: center;
    color:#eee;
    font-size: 1.05em;
    font-family: regular1;
    line-height: 30px;
    text-align: center;
    padding:10px;
    padding-top:20px;
    padding-bottom:40px;
}
/*Start of Values*/
#values
{
    padding-bottom: 50px;
    background: #f8f8f8;
}
#canvas
{
    padding-top: 50px;
    padding-bottom: 70px;
    width:100%;
    margin:auto;
    max-width: 1440px;
    position: relative;
}
#canvas .gear
{
    width:14%;
    height:auto;
    position: relative;
    display: inline-block;
    margin:auto;
    vertical-align: top;
    cursor: pointer;
}
#canvas img
{
    width:100%;
    height:auto;
}
#canvas .gear1
{
    width:8%;
    z-index: 2;
    display: inline-block;
    margin:auto;
    margin-top:3%;
    margin-left:1.5%;
    margin-right: 1.5%;
    vertical-align: top;
}
.value
{
    height:auto;
    width:500px;
    position: relative;
    max-width: 98%;
    padding:0;
    display: inline-block;
    margin:auto;
    margin-left:.25%;
    margin-right: .25%;
    margin-bottom: .75%;
    border-top:3px solid #4fc34f;
    background: #5fd35f;
    vertical-align: top;
    overflow: hidden;
}
.value img
{
    width:110%;
    display: block;
    margin:0;
    margin-left:-10%;
    padding: 0;
    -webkit-transition: all .75s;
    -moz-transition: all .75s  ; 
    -o-transition: all .75s  ; 
    -ms-transition: all .75s  ;
}
.value:hover img
{
    margin-left:0%;
}
.value section
{
    position: absolute;
    height:100%;
    width:100%;
    background: rgba(0,0,0,.25);
    top:0;
    left:0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s  ; 
    -o-transition: all .5s  ; 
    -ms-transition: all .5s  ;
}
.value:hover section
{
    background: rgba(0,0,0,.55);
}
.value section h2
{
    color:#eee;
    font-family: regular;
    font-size: 3.5em;
    vertical-align: bottom;
    text-align: left;
    text-indent: 5%;
    padding-top:60%;
    -webkit-transition: all ease-in-out .5s;
    -moz-transition: all ease-in-out .5s; 
    -o-transition: all ease-in-out .5s; 
    -ms-transition: all ease-in-out .5s;
}
.value:hover section h2
{
    padding-top:50%;
}
.value section p
{
    text-align: left;
    width:90%;
    margin-left:5%;
    margin-top:40px;
    color:transparent;
    -webkit-transition: all ease-in-out  .75s;
    -moz-transition: all ease-in-out  .75s; 
    -o-transition: all ease-in-out  .75s; 
    -ms-transition: all ease-in-out  .75s;
    font-family: cambria;
    font-size: 1em;
}
.value:hover section p
{
    margin-top:20px;
    color:#ccc;
}
/*Projects*/
#projects1
{
}
#page1 #projects
{
    width:100%;
    height:600px;
    max-width: 1600px;
    margin:auto;
    margin-bottom: 100px;
    margin-top:50px;
    display: block;
    position: relative;
    overflow: hidden;
}
#page1 #slider
{
    height: 600px;
    background: #fff;
    position: absolute;
    text-align: left;
    top:0px;
}
#projects #slider div
{
    position: absolute;
    width:100%;
    height:100%;
    margin: 0;
    overflow: hidden;
    border-top:none;
    border-right:none;
    padding: 0;
}
#page1 #slider .cover img
{
    height: 110%;
    margin-top:-5%;
    -webkit-transition: all .35s;
    -moz-transition: all .35s  ; 
    -o-transition: all .35s  ; 
    -ms-transition: all .35s  ;
}
#page1 #slider .cover:hover img
{
    margin-top:0%;
}
#page1 #slider .cover section
{
    position: absolute;
    top:0px;
    left:0px;
    background: rgba(0,0,0,.125);
    height:100%;
    width:100%;
    -webkit-transition: all 1s;
    -moz-transition: all 1s  ; 
    -o-transition: all 1s  ; 
    -ms-transition: all 1s  ;
}
#page1 #slider .cover section:hover
{
    background: rgba(0,0,0,.85);
}
#page1 #slider .cover section .read
{
    height:45px;
    width:130px;
    display: block;
    position: relative;
    top:50%;
    left:50%;
    margin:-65px;
    margin-top:0px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color:#fff;
    font-size: 25px;
    font-family: regular;
    border-bottom:1px solid #5fd35f;
    opacity: 0;
    -webkit-transition: all .65s;
    -moz-transition: all .65s  ; 
    -o-transition: all .65s  ; 
    -ms-transition: all .65s  ;
}
#page1 #slider .cover section:hover .read
{
    opacity: 1;
    cursor: pointer;
    margin-top:80px;
}
.visible
{
    opacity:1;
}
#page1 #slider .cover section h2
{
    font-family: regular;
    color:transparent;
    font-size: 2.5em;
    top:50%;
    height:70px;
    width:98%;
    line-height: 55px;
    position: relative;
    display: block;
    margin:auto;
    margin-top:-35px;
    text-align: center;
    -webkit-transition: all .5s;
    -moz-transition: all .5s  ; 
    -o-transition: all .5s  ; 
    -ms-transition: all .5s  ;
}
#page1 #slider .cover section:hover h2
{
    color:#fff;
    margin-top:-90px;
}
#page1 #slider .cover section .content
{
    color:#bbb;
    text-align: justify;
    padding:5%;
    vertical-align: central;
    width:85%;
    display: none;
    border:1px solid #fff;
    z-index: 10;
    border-radius: 20px;
    margin-left:2%;
    background: rgba(0,0,0,0.75);
    top:0px;
    opacity:0;
    left:0px;
}
#projects #slider .first
{
    height:100%;
    width:500px;
    left:0px;
    top:0px;
}
#projects #slider .second
{
    left:500px;
    height:100%;
    width:500px;
}
#projects #slider .second div
{
    height:50%;
    margin:0;
    position: relative;
    vertical-align: top;
}
#projects #slider .multi img
{
    width:100%;
    height: auto;
}
#projects #slider .third
{
    left:1000px;
    width:500px;
    height:100%;
}
#projects #slider .fourth
{
    top:0%;
    height:100%;
    width:500px;
    left:1500px;
}
#projects #slider .fourth div
{
    width:100%;
    height:50%;
    position: relative;
    vertical-align: top;
    float: left;
}
#page1 #projects .move
{
    height:80px;
    width:80px;
    position: absolute;
    top:50%;
    left:10px;
    margin-top:-40px;
    background:url('../images/graphic/prev.svg');
    background-size: 80% auto;
    background-position: 50% 50%;
    cursor: pointer;
    background-repeat: no-repeat;
}
#page1 #projects #next
{
    right:10px;
    left:auto;
    background:url('../images/graphic/next.svg');
    background-size: 80% auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
/*Self Help Groups*/
#selfhelp
{
    padding-bottom: 50px;
}
#selfhelp #shg
{
    width:35%;
    display: inline-block;
    vertical-align: top;
    margin:5%;
    margin-left: 7.5%;
    margin-right:2.5%;
    margin-top:5%;
    margin-bottom: 0;
}
#selfhelp p
{
    display: inline-block;
    vertical-align: top;
    width:45%;
    margin:5%;
    margin-top:0;
    margin-bottom: 0;
    margin-right: 5%;
    margin-left: 0;
}
#selfhelp p span
{
    margin-top:0;
}
#selfhelp .ol_shg
{
    margin-top:25px;
    text-indent: 10px;
    padding-left: 20px;
}
#selfhelp .cornerspan
{
    font-size: 1.25em;
    margin-top:70px;
    margin-bottom: 25px;
    display: block;
    line-height: 60px;
    height:60px;
}
#selfhelp .corner
{
    height:60px;
    border:1px solid rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    vertical-align: top;
    margin-right: 20px;
}
/*Contact*/
#contact
{
    background:url('../images/buffer.jpg');
    background-size: 110% auto;
    background-position: 50% 0%;
    background-color: transparent;
    background-attachment: scroll;
    background-color:#f8f8f8;
}
#contact .input
{
    width:350px;
    max-width: 90%;
    margin:auto;
    background:transparent;
    border:1px solid #ddd;
    border-radius: 0px;
    color:#5fd35f;
    font-size: 15px;
    font-family: regular1;
    margin-bottom:20px;
}
#contact input[type="button"]
{
    height:50px;
    width:200px;
    background:transparent;
    color:#4fc34f;
    border:1px solid #5fd35f;
    text-shadow: none;
    border-radius: 0px;
    margin-top:30px;
    font-family: regular1;
    font-size: 15px;
    font-weight: 100;
}
#contact input[type="text"]
{
    height: 40px;
    padding:5px;
    padding-left: 10px;
}
#contact textArea
{
    height:100px;
    padding:5px;
    padding-top:15px;
    padding-left: 10px;
}
/*End of Contact. Start of Last*/
#footer
{
    height:200px;
    width:100%;
    margin-top:50px;
    background:rgba(0,0,0,0.5);
    display: block;
    position: relative;
}
.ref
{
    color:#4fc34f;
    display: inline-block;
    text-decoration: none;
    font-size: 2.25em;
    float:left;
    margin:30px;
    margin-top:90px;
    font-family: cursive1;
}
.ref span
{
    font-family: regular1;
    font-size: 0.65em;
    margin-right: 0px;
    color:#fff;
}
#ref1
{
    color: #fff;
    font-family: regular;
    font-size: 2em;
}
.ref:hover
{
    color:#fff;
}
.ref:nth-child(2)
{
    float:right;
}
/*Social Feeds*/
#facebook
{
    width:100%;
    height:500px;
}
#socialfeed
{
    background: #f8f8f8;
    margin-bottom: 0;
    padding-bottom: 100px;
}