body,html{width:100%;height:100%;margin:0;padding:0; background-color:#339966;}
body{max-width:100%!important;overflow-x:hidden}
::selection{background:#339966;color:#fff}
::-moz-selection{color:#fff}
::-webkit-selection{background:#339966;color:#fff}
#canvas{background-size:100%;margin:0;padding:0}
#container{width:100%;position:relative}
#infoi,#navi{width:100%;position:absolute;top:0;left:0}
#navi{padding-top:15px;z-index:10;width:100%;height:100px;}
div#logodiv{width:15%;float:left}
div#buttons{margin-left: 80%;width: 250px;}
#down,#more{cursor:pointer}
.logo{width:160px;margin-left:40px;margin-top:-3px}
section{text-align:center;padding:40px 0}
section h2.section-heading{margin-top:0;margin-bottom:15px;font-size:40px}
section h3.section-subheading{margin-bottom:75px;text-transform:none;font-family:Roboto,'Open Sans',Verdana,sans-serif;font-size:16px;font-weight:400}
section .row:first-of-type h3{margin-top:0;font-weight:300}
@media(min-width:768px){section{padding:3% 0}
}
h1,h2,h3,h4,h5,h6{font-family:Roboto,'Open Sans',Verdana,sans-serif;color:#333332}
h6{font-weight:900;font-size:8.5vw;text-align:left;padding:25px 0 60px;letter-spacing:-1px;text-transform:uppercase}
.pt{color:#fff}
li{list-style:none}
.btn-group{position:relative;display:inline-block;float:right;padding-top:10px;vertical-align:middle;margin-left:20px}
.btn-default{color:#fff}
.btn-group>.btn:first-child{margin-left:0;background:0 0;border:0}
.btn-group.open .dropdown-toggle{webkit-box-shadow:none;box-shadow:none}
.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:90px;padding:5px 0;margin:2px 0 0;list-style:none;font-size:14px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:2px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175);background-clip:padding-box}
@media(max-width:767px){.btn-group{position:absoulte;display:inline-block;padding-top:10px;margin-right:30px}
}
.description{font-size:1.2em;line-height:1.7;letter-spacing:.5px;margin-bottom:50px;font-weight:300;color:#696969;margin-top:5%}
hr{width:50%}
a{color:#34495e;outline:0!important}
a:hover{color:#fff;outline:0!important}
.fontcolor{color:#fff}
.rotating{display:inline-block;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(0) rotateY(0) rotateZ(0);-moz-transform:rotateX(0) rotateY(0) rotateZ(0);-ms-transform:rotateX(0) rotateY(0) rotateZ(0);-o-transform:rotateX(0) rotateY(0) rotateZ(0);transform:rotateX(0) rotateY(0) rotateZ(0);-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;-webkit-transform-origin-x:50%}
.rotating.flip{position:relative}
.rotating .back,.rotating .front{left:0;top:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden}
.rotating .front{position:absolute;display:inline-block;-webkit-transform:translate3d(0,0,1px);-moz-transform:translate3d(0,0,1px);-ms-transform:translate3d(0,0,1px);-o-transform:translate3d(0,0,1px);transform:translate3d(0,0,1px)}
.rotating.flip .front{z-index:1}
.rotating .back{display:block;opacity:0}
.rotating.spin{-webkit-transform:rotate(360deg) scale(0);-moz-transform:rotate(360deg) scale(0);-ms-transform:rotate(360deg) scale(0);-o-transform:rotate(360deg) scale(0);transform:rotate(360deg) scale(0)}
.rotating.flip .back{z-index:2;display:block;opacity:1;-webkit-transform:rotateY(180deg) translate3d(0,0,0);-moz-transform:rotateY(180deg) translate3d(0,0,0);-ms-transform:rotateY(180deg) translate3d(0,0,0);-o-transform:rotateY(180deg) translate3d(0,0,0);transform:rotateY(180deg) translate3d(0,0,0)}
.rotating.flip.up .back{-webkit-transform:rotateX(180deg) translate3d(0,0,0);-moz-transform:rotateX(180deg) translate3d(0,0,0);-ms-transform:rotateX(180deg) translate3d(0,0,0);-o-transform:rotateX(180deg) translate3d(0,0,0);transform:rotateX(180deg) translate3d(0,0,0)}
.titleh1{padding:0;margin:0;color:#fff;z-index:2;display:inline-block}
.titlediv{position:absolute;top:30%;left:40px}
.titlediv h6{font-size:8vw}
{position:absolute;top:30%;left:40px}
.first{color:#38bab1}
#hero{width:100%;height:100%;background-image:url(../img/cover1.png);background-repeat:no-repeat;background-position:center center;background-attachment:scroll;background-color:#1a1a1a;z-index:-1}
.cover{position:relative;overflow:hidden;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;-ms-background-size:cover;background-size:cover}
.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top,rgba(0,0,0,.5) 34%,rgba(0,0,0,0) 100%)}
@media(min-width:768px){#hero{height:100%}
}
@media(min-width:1440px){#hero{height:100%}
}
@media(min-width:992px){#hero{background-attachment:fixed}
}
.navbar-brand img{width:60px}
.navbar-brand{padding:7px 0}
.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:transparent!important}
.navbar-default .navbar-toggle{border-color:transparent!important}
.navbar-toggle{position:relative;float:right;margin-right:15px;padding:9px 12px;margin-top:19px;margin-bottom:8px;background-image:url(../img/menu.png);border:0;border-radius:0}
.navbar-default .navbar-toggle:hover{background-image:url(../img/menu_hover.png);background-color:transparent}
.navbar-collapse{border:0;background-color:transparent}
.navbar-default{background-color:transparent;border:0}
.navbar-default .navbar-nav>li>a{color:#fff;font-size:.9em;font-weight:300;padding-top:18px}
.navbar-nav>li>a{padding-top:15px;padding-bottom:19px}
.navbar-default .navbar-nav>li#language{margin-left:20px}
.navbar-default .navbar-nav>li#language a{padding-top:17px!important}
.navbar-default .navbar-nav>li#language img{margin-top:-3px}
.navbar-default .navbar-nav>li>a:hover{color:#fff;background-color:#58C2BB}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#fff;background-color:#339966}
.arrow{position:absolute;bottom:2%;left:45%;width:10%}
.arrow img{width:100%}
nav{position:fixed;width:100%;text-align:center;font-size:1.3em;line-height:108px;background:0 0;color:#fff;// set animation -webkit-transition:all .4s ease;transition:all .4s ease}
nav.sticky{font-size:1.2em;line-height:48px;height:57px;background:#38bab1;text-align:left;padding-left:20px}
.triangle{width:0;height:0;border-style:solid;border-width:0 26vw 26vw 0;position:absolute;right:0;top:0;z-index:1;border-color:transparent #333332 transparent transparent}
.triangle2{width:0;height:0;border-style:solid;border-width:0 26vw 26vw 0;position:absolute;right:0;top:0;z-index:1;border-color:transparent #fff transparent transparent}
#about{min-height:100%;background-color:#fff;position:relative;padding-right:0}
.abouttext1{padding-right:3%;text-align:center}
.abouttext2{padding-left:3%;text-align:center}
.svgabout,.svgservices{display:none;width:24%;z-index:2;padding-right:0;float:right;position:absolute;top:0;right:0}
#services{background-color:#f2f3f7;position:relative}
.service{margin-bottom:30px}
.service img{width:35%}
.service .wrapper{background-color:#fff;padding:15% 3% 3%;height:350px}
.wrapper{background-color:#fff;padding:3%;height:350px}
.service-heading{margin:15px 0;text-transform:none}
.grid{overflow:hidden;margin:0;padding:3em 0 0;width:100%;max-width:1920px;list-style:none;text-align:center}
.grid figure{position:relative;z-index:1;display:inline-block;overflow:hidden;margin:-.135em;width:33.333%;height:400px;background:#3085a3;text-align:center;cursor:pointer}
.grid figure img{position:relative;display:block;min-height:100%;opacity:.8}
.grid figure figcaption{padding:2em;color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.grid figure figcaption::after,.grid figure figcaption::before{pointer-events:none}
.grid figure a,.grid figure figcaption{position:absolute;top:0;left:0;width:100%;height:100%}
.grid figure a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}
.grid figure h2{word-spacing:-.15em;font-weight:300}
.grid figure h2 span{font-weight:800}
.grid figure h2,.grid figure p{margin:0}
.grid figure p{letter-spacing:1px;font-size:68.5%}
figure.effect-sadie figcaption::before{position:absolute;top:0;left:3%;width:94%;height:350px;background:-webkit-linear-gradient(top,rgba(0,166,156,.7) 0,rgba(0,166,156,.7) 75%);background:linear-gradient(to bottom,rgba(0,166,156,.7) 0,rgba(0,166,156,.7) 75%);content:'';opacity:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-sadie h2{position:absolute;top:65%;left:0;width:100%;color:#484c61;font-family:Roboto,'Open Sans',Verdana,sans-serif;font-weight:800;-webkit-transition:-webkit-transform .35s,color .35s;transition:transform .35s,color .35s;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}
figure.effect-sadie figcaption::before,figure.effect-sadie p{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
figure.effect-sadie p{font-size:1.1em;padding:2% 3% 0;width:100%;line-height:1.3em;opacity:0;color:#fff;font-family:Roboto,'Open Sans',Verdana,sans-serif;font-weight:300;-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
figure.effect-sadie:hover h2{color:#fff;-webkit-transform:translate3d(0,-50%,0) translate3d(0,-100px,0);transform:translate3d(0,-50%,0) translate3d(0,-100px,0);padding-bottom:20px}
figure.effect-sadie:hover figcaption::before,figure.effect-sadie:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
@media screen and (max-width:767px){.btn-group#language{position:absolute;top:-3px;right:3.2em;width:14%;padding-top:10px;vertical-align:middle;margin-left:20px}
.navbar-collapse{border:0;background-color:#444;margin-left:-35px;box-shadow:0 1px 4px #AFAFAF}
.container>.navbar-collapse{margin-left:-35px;margin-top:5px}
.navbar-default .navbar-nav>li>a{color:#727272;font-size:.9em;font-weight:300;padding-top:12px!important;text-align:left;padding-left:20px}
.navbar-default .navbar-nav>li:hover{background-color:#D8D8D8}
.navbar-default{padding-left:10px}
.navbar-default .navbar-nav>li>a:hover{color:#38bab1}
.navbar-default .navbar-nav>.active>a{color:#38bab1;background-color:#666}
h6{margin-top:5px}
.service .wrapper{background-color:#fff;padding:8% 3% 3%;height:auto}
.service img{width:30%}
section{padding:10px 0}
figure.effect-sadie figcaption::before,figure.effect-sadie p{margin-top:10px}
figure.effect-sadie figcaption::before{position:absolute;top:0;left:3%;width:94%;height:350px;background:0 0;content:''}
figure.effect-sadie h2{position:relative;width:100%;font-family:Roboto,'Open Sans',Verdana,sans-serif;font-weight:800;margin-top:30px;-webkit-transition:none;transition:none}
figure.effect-sadie p{font-size:1.1em;padding:2% 4% 4%;width:100%;line-height:1.3em;color:#484c61;font-family:Roboto,'Open Sans',Verdana,sans-serif;font-weight:300}
figure.effect-sadie figcaption::before,figure.effect-sadie p{-webkit-transition:none;transition:none}
figure.effect-sadie h2{color:#484c61;-webkit-transform:none;transform:none}
figure.effect-sadie figcaption::before,figure.effect-sadie p{opacity:1;-webkit-transform:none;transform:none}
figure.effect-sadie:hover h2{color:#484c61;-webkit-transform:none;transform:none}
figure.effect-sadie:hover figcaption::before,figure.effect-sadie:hover p{opacity:1;-webkit-transform:none;transform:none}
section#contact{padding-bottom:20%}
ul#infos{width:100%!important;text-align:center!important;display:inline-block;color:#fff;float:none;margin:0;position:relative;padding:0}
ul#infos li{display:inline-block;padding:0 5px}
ul.social{float:none;width:100%!important;padding:5% 0}
}
footer{background:#1C1E24;text-align:center;padding:35px 0 15px;position:relative}
img#footerimg{margin-top:-76px;width:120px}
span.title_list{font-size:16px;font-weight:600;line-height:32px;color:#D5D5D5}
ul.infos{text-align:left;display:inline-block;color:#E9E9E9;padding-left:0;float:left}
ul.infos a:hover{text-decoration:underline;color:#969696}
.infos li{list-style:none;font-weight:300;font-size:12px;line-height:20px;color:#969696}
ul.social{display:inline-block;float:left;padding-left:0}
.social li{padding:0;text-align:left}
.social li.icon_social{display:inline-block;color:#c6c6c6;float:left;text-align:left;padding-right:15px}
.social li.icon_social .fa{font-size:20px;color:#969696}
.social li.icon_social .fa:hover{color:#38bab1}
.container{max-width:100%}
nav#primary{z-index:5;position:fixed;top:50%;right:16px;margin-top:-40px}
nav#primary li{position:relative;height:20px}
nav#primary a{display:block;height:20px;text-indent:-9999px;background:url(../img/nav-dot.png) 4px 4px no-repeat}
nav#primary a.active,nav#primary a:hover{background:url(../img/nav-dot.png) 4px -16px no-repeat}
nav#primary h6{position:absolute;right:22px;top:-7px;display:none;padding:4px 20px 4px 7px;color:#fff;white-space:nowrap;background:url(../img/nav-arrow.png) 100% 50% no-repeat}
nav.next-prev{margin:20px 0 0}
a.next,a.prev{display:block;width:15px;height:11px;text-indent:-9999px}
a.prev{margin:0 auto 5px;background:url(../img/scroll-arrow-up.png) no-repeat}
a.prev:hover{background:url(../img/scroll-arrow-up.png) 0 -11px no-repeat}
a.next{margin:5px auto 0;background:url(../img/scroll-arrow-down.png) -1px 0 no-repeat}
a.next:hover{background:url(../img/scroll-arrow-down.png) -1px -11px no-repeat}
.svgportfolio{display:hidden;width:24%;z-index:2;padding-right:0;float:right;position:absolute;top:0;right:0}
#ball-wrap-portfolio{width:50%;height:50%}
.playdiv{margin-top:40px}
.playbutton{background-color:#38bab1;padding:15px 50px;border-radius:2px;color:#fff;text-decoration:none}
.playbutton:hover{color:#fff;text-decoration:none}
#portfolio{background-color:#2b2f3e;position:relative}
#portfolio .portfolio-item{right:0;margin:0 0 15px}
#portfolio .portfolio-item .portfolio-link{display:block;position:relative;margin:0 auto;max-width:400px}
#portfolio .portfolio-item .portfolio-link .portfolio-hover{position:absolute;width:100%;height:100%;opacity:0;background:rgba(56,186,177,.5);-webkit-transition:all ease .5s;-moz-transition:all ease .5s;transition:all ease .5s}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover{opacity:1}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content{position:absolute;top:50%;width:100%;height:20px;margin-top:-12px;text-align:center;font-size:20px;color:#fff}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i{margin-top:-12px}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4{margin:0}
#portfolio .portfolio-item .portfolio-caption{margin:0 auto;padding:25px;max-width:400px;text-align:center;background-color:#fff;text-decoration:none}
#portfolio .portfolio-item .portfolio-caption h4{margin:0;text-transform:none;text-decoration:none}
.text-muted{text-decoration:none!important}
#portfolio .portfolio-item .portfolio-caption p{margin:0;font-family:Roboto,'Open Sans',Verdana,sans-serif;font-size:16px;text-decoration:none}
#portfolio h6{color:#fff}
@media(min-width:767px){#portfolio .portfolio-item{margin:0 0 30px}
}
.btn.active,.btn:active,.btn:active:focus,.btn:focus{outline:0}
.image{position:absolute;top:0;left:0;margin:0;padding:0;max-width:50%;max-height:50%;background-size:100% auto}
.portfolio-modal .modal-content{padding:0;margin:5% 5% 0;width:90%;height:85%;border:0;border-radius:0;text-align:left;-webkit-box-shadow:none;box-shadow:none}
.modal-body{position:relative;float:left;width:50%;max-height:100%}
.clear{clear:both}
.portimage{float:left;width:50%;max-height:100%;overflow-y:scroll}
.italico{font-style:italic;font-weight:300}
@media screen and (max-width:1024px){.portimage{float:left;width:100%;max-height:50%;overflow-y:scroll}
.modal-body{position:relative;float:right;width:100%;max-height:50%;overflow-y:scroll}
.clear{clear:both}
}
.portfolio-modal .modal-content h2{margin-bottom:10px;font-size:18px}
.portfolio-modal .modal-content p{margin-bottom:10px;font-size:13px;font-weight:200}
.portfolio-modal .modal-content p.item-intro{font-family:Roboto,'Open Sans',Verdana,sans-serif;font-size:16px;font-weight:200}
.portfolio-modal .modal-content ul.list-inline{margin-top:0;margin-bottom:10px}
.portfolio-modal .modal-content img{padding:0;top:0;left:0;width:100%;z-index:2000;display:block;height:auto!important;-ms-interpolation-mode:bicubic}
.portfolio-modal .close-modal{position:absolute;top:10px;right:10px;width:25px;height:25px;background-color:transparent;cursor:pointer}
.portfolio-modal .close-modal:hover{opacity:.4}
.portfolio-modal .close-modal .lr{z-index:1051;width:1px;height:25px;margin-left:10px;background-color:#222;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.portfolio-modal .close-modal .lr .rl{z-index:1052;width:1px;height:25px;background-color:#222;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}
::-moz-selection{text-shadow:none;background:#339966}
::selection{text-shadow:none}
img::selection{background:0 0}
img::-moz-selection{background:0 0}
body{webkit-tap-highlight-color:#339966}
.svgcontact{display:none;width:24%;z-index:2;padding-right:0;float:right;position:absolute;top:0;right:0}
section#contact{position:relative;background-color:#f2f3f7;background-position:center;background-repeat:no-repeat;min-height:100%}
section#contact .section-heading{color:#fff}
section#contact .form-group{margin-bottom:25px}
section#contact .form-group input,section#contact .form-group textarea{padding:20px}
section#contact .form-group input.form-control{height:auto}
section#contact .form-group textarea.form-control{height:236px}
section#contact .form-control:focus{border-width:2px;border-color:#3085a3;box-shadow:none}
section#contact::-webkit-input-placeholder{text-transform:uppercase;font-family:Roboto,'Open Sans',Verdana,sans-serif;font-weight:700;color:#bbb}
section#contact:-moz-placeholder{text-transform:uppercase;font-family:Roboto,'Open Sans',Verdana,sans-serif;font-weight:700;color:#bbb}
section#contact::-moz-placeholder{text-transform:uppercase;font-family:Roboto,'Open Sans',Verdana,sans-serif;font-weight:700;color:#bbb}
section#contact ul{margin-top:0;padding-left:0;text-align:left;margin-bottom:10px}
#contactForm button{border-radius:0;color:#fff}
#message::-moz-selection{background:#f2f3f7}
#message::selection{background:#f2f3f7}
#name::-moz-selection{background:#f2f3f7}
#name::selection{background:#f2f3f7}
#email::-moz-selection{background:#f2f3f7}
#email::selection{background:#f2f3f7}
#phone::-moz-selection{background:#f2f3f7}
#phone::selection{background:#f2f3f7}
section#contact:-ms-input-placeholder{text-transform:uppercase;font-family:Roboto,'Open Sans',Verdana,sans-serif;font-weight:700;color:#bbb}
section#contact .text-danger{color:#e74c3c}
#message{resize:none}
.link:hover{color:#aaa;text-decoration:none}
.hidden{display:none}
#buttons{position:absolute;float:right}