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

@import url(http://fonts.googleapis.com/css?family=Great+Vibes|Playball|Maven+Pro:400,500|Salsa);

body{ background:#fff;background:url(../images/bg/bg.jpg) center no-repeat; background-attachment:fixed; bottom:0; margin:0; padding:0; font:300 16px 'Maven Pro'; color:rgba(0,0,0,0.8);}

header{position:absolute; background:rgba(255,255,255,0.7); padding:20px 0; z-index:101; top:40px; width:100%;}

nav{margin-top:12px;}

a:hover{transition: all 0.5s ease;}

p{font:400 16px 'Maven Pro'; text-align:justify; line-height:22px; margin:10px 0;}

h1, h2, h3, h4, h5{ margin:5px 0;}

.logo{max-width:380px; width:100%;}

section{ padding:2em 0;}

#welcome{background:#78ae75;}

#welcome h1{font:400 48px 'Great Vibes'; color:#fff;text-align:center !important;}
#welcome h1 span{font:400 48px 'Playball'; color:#fff;text-align:center !important; margin:0}
#welcome p{color:rgba(255,255,255,0.7); font:400 17px 'Maven Pro'; line-height:20px; text-align:justify;}

#dise{background:#e9e8e8;}
#dise h1{font:400 48px 'Great Vibes'; color:#000;text-align:center !important;}
#dise h1 span{font:400 48px 'Playball'; color:#000;text-align:center !important; margin:0}

.box{margin:15px 30px; border:1px solid #087502; background:#fff;}
.box:hover{border:1px solid #000; background:rgba(120,174,117,0.5);}
.box:hover h2{color:#000; background:#fff;}
.box:hover p{color:#333;}

.box i{text-align:center; display:inherit; margin:15px 0}
.box i img{width:50px; height:50px;}
.box h2{background:#e0dfdf; color:#78ae75; font:400 30px 'Playball'; margin:20px 0; padding:10px 0;text-align:center !important;}
.box p{color:rgba(0,0,0,0.7); font:400 17px 'Maven Pro'; padding:10px 20px;}

#project{background:#fff;}
#project h1{font:400 48px 'Great Vibes'; color:#000;text-align:center !important;}
.box1{margin:15px auto; background:#78ae75 ; text-align:center; width:87%; min-height:400px; box-shadow:0px 1px 10px rgba(0,0,0,0.6);}
.box1 p{color:rgba(0,0,0,0.7); font:400 17px 'Maven Pro'; padding:20px 0; text-align:center; line-height:20px; min-height:80px;}
.box_g{ height: 238px;margin: auto;overflow: hidden;max-width: 320px;}
.box1 img{width:100%; margin:8px auto}
.box1 a{ padding:5px 10px; background:#000; border:1px solid rgba(255,255,255,0.1); color:#fff; border-radius:5px; text-decoration:none; display:inline-block;}
.box1 a:hover{background:#fff; color:#000}

#news{background:rgba(255,255,255,0.8); /*url(../images/bg/bg.jpg) center no-repeat; background-size:cover;*/ padding:0!important; text-align:center}
#news h2{margin:40px 0 10px; font:500 40px 'Great Vibes';}
#news h3{font:500 22px 'Maven Pro'; margin:20px 0;}
#news p{color:rgba(0,0,0,0.9); font:400 17px 'Maven Pro'; line-height:26px;}
#news a{color:#f00; font-size:15px; margin:40px 0 0;}

#experience{background:#78ae75; text-align:center;}
#experience h1{font:400 32px 'Maven Pro'; color:#fff; margin:0 0 30px;}

.ant h2{font:500 41px 'Maven Pro'; color:#fff;}
.ant span{font:400 25px 'Maven Pro'; color:#fff; letter-spacing:2;}

#footer{/*background:url(../images/bg/bg.jpg) no-repeat center; background-size:cover;*/}
footer{background:rgba(255,255,255,0.7); width:100%; padding:40px 0; text-align:center; color:#000; border-top: 5px solid #78ae75;}
.copyright a {color:#000; border:0 !important; padding:0 !important}
.nav a{display:inline-block; color:#000; font:400 17px 'Maven Pro'; padding:5px 20px; text-decoration:none; border-bottom:2px solid rgba(0,0,0,0);}
.nav a:hover{color:#C00; font-weight:normal;border-bottom:2px solid #c00;}
.form{ display:table;}
.form label{width:33%; text-align:center; margin:10px 0;}
.form label span{background:#78ae75; color:#000; width:40px; height:40px; display:inline-block; padding:10px 0 0 0; vertical-align:top; margin:0 -5px 0 0}
.form input{height: 40px;max-width: 300px;width: 100%;}
.form input[type="submit"]{background:#78ae75; color:#000;}
 
.clients{display:table; margin:15px 0; padding:15px; border:1px dotted rgba(0,0,0,0.2); border-radius:10px; width:100%;}

.clients:hover{border:1px solid rgba(120,174,117,0.9);box-shadow: 0 0 5px rgba(120, 174, 117, 0.8); }
.clients:hover img{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */}

.clients img{float:left; margin:0 10px 0 0; max-width:150px; height:150px; width:100%;}
.clients h4{color:#bd0404; font:500 18px 'Maven Pro'; text-align:left; margin-bottom:20px;}
.pg{text-align:center; float:left; border:1px solid rgba(0,0,0,0.1); padding:15px; margin:26px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.2)} 

.pg:hover{border:1px solid rgba(120,174,117,0.9); padding:15px; margin:26px;box-shadow: 0 0 5px rgba(120, 174, 117, 0.8); border-radius:0 20px 0 20px;} 

.pg img{width:220px;height:200px;}
.pg h5{ background: #78ae75 none repeat scroll 0 0;color: #fff;display: block;font: 300 18px "Maven Pro";    margin: 0 0 10px;padding: 5px 10px;text-decoration: none;}
	
.pg:hover h5{color:#000; background:#ccc;}
.pg a:hover{text-decoration:none; color:#F00 !important;}

.pg img.grayscale {
   filter: none;
    -webkit-filter: grayscale(0%);
}

.pg img.grayscale:hover {
    
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

.about_img{float:right; margin-left:20px; padding:8px; border:2px solid rgba(0,0,0,0.1); max-width:250px;}
.about_img1{float:left; margin-right:20px; padding:8px; border:2px solid rgba(0,0,0,0.1); max-width:300px;}


/* XS Portrait */
@media (max-width: 1200px) {
.form label{width:32% !important;}
.form input{width:80%;}}

@media (max-width: 980px) {
	.pg{width:31%;  margin:5px; padding:5px;}
	.pg img{width:200px; height:200px;}
}

@media (max-width: 768px) {
.form label{width:49% !important;}
.form input{width:80%;}
.pg{width:42%}
.pg img{width:100% !important;}}

@media (max-width: 480px) {
.clients{padding:10px!important;}
.clients img{margin:0 0 20px !important; max-width:100%; height:100%;}
.box{margin:0 0 20px !important;} .box1{margin:0 0 20px !important;}
.pg{margin:0 0 15px !important; width:100%;}
.pg img{width:100% !important;}
.form label{width:100% !important;}
.form input{width:75%;}}