/*Theme.css*/

/*

    1. DOCUMENT SETUP
    2. PAGE PRELOADER
    3. WRAPPER
    4. PAGE HEADER
        4.1 CONTAINER
        4.2 LOGO
        4.3 OPEN NAVIGATION BUTTON
    5. NAVIGATION
        5.1 NAVIGATION LIST
        5.2 NAVIGATION CONTAINER
        5.3 BOTTOM CONTAINER
    6. SCROLL DOWN BUTTON
    7. SECTION HEADLINE
    8. PORTFOLIO
        8.1 GRID
        8.2 LAYER
        8.3 LOAD MORE
        8.4 PROJECT DETAILS
        8.5 PORTFOLIO CONTROLS
    9. TEAM
        9.1 LAYER
    10. BLOG
        10.1 GRID
        10.2 LAYER
        10.3 LOAD MORE
        10.4 BLOG DETAILS
        10.5 BLOG CONTROLS
    11. CONTACT
    12. FOOTER
    13. CSS ANIMATIONS
        13.1 JUMP
        13.2 ROTATE
    14. TOOLTIP (DZN CUSTOM)



/* --------------------------------------------------------------------- */

/* 1. DOCUMENT SETUP
/* --------------------------------------------------------------------- */
@import url(./Klavika-Regular/styles.css);
@import url(./Klavika-Bold/styles.css);
body{font-size:100%;font-family:'Raleway',sans-serif;font-family:'Klavika-Regular','Raleway',sans-serif;font-weight:400;line-height:1.7;color:#595959;height:100%;width:100%;background:#f7f7f7;overflow-x:hidden;overflow-y:scroll;}

/* --------------------------------------------------------------------- */

/* 2. PAGE PRELOADER
/* --------------------------------------------------------------------- */

#page-preloader{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;background:#f7f7f7;overflow:hidden;}
.pre-loader-content{position:absolute;top:50%;left:0;width:100%;margin-top:-25px;text-align:center;}

/* --------------------------------------------------------------------- */

/* 3. WRAPPER
/* --------------------------------------------------------------------- */

#pagewrapper{position:absolute;top:0;right:0;width:100%;min-height:100%;padding-top:80px;z-index:3;background:#f7f7f7;-moz-box-shadow:0 0 55px rgba(0,0,0,0.25);-webkit-box-shadow:0 0 55px rgba(0,0,0,0.25);box-shadow:0 0 55px rgba(0,0,0,0.25);}
section{position:relative;padding:40px 0;}
section.white{position:relative;background:#fff;}

/* --------------------------------------------------------------------- */

/* 4. PAGE HEADER
/* --------------------------------------------------------------------- */

/* ==== 4.1 CONTAINER ==== */

#page-header{position:fixed;top:0;right:0;width:100%;height:80px;line-height:80px;background:#fff;z-index:9997;-moz-box-shadow:0 0 5px rgba(0,0,0,0.1);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.1);box-shadow:0 0 5px rgba(0,0,0,0.1);}

/* ==== 4.2 LOGO ==== */
#logo{position:absolute;top:0;left:40px;height:100%;}
#logo img{max-height:80px;width:auto;}

/* ==== 4.3 OPEN NAVIGATION BUTTON ==== */
#open-navi{display:block;position:absolute;top:0;right:0;padding:0 40px;height:100%;color:#595959;z-index:9999;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:line-height 0;-moz-transition:line-height 0;-o-transition:line-height 0;transition:line-height 0;}
#open-navi:hover,#open-navi.active{color:#77d0dc;}
#subs-navi{display:block;position:absolute;right:160px;height:100%;color:#595959;z-index:9999;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:line-height 0;-moz-transition:line-height 0;-o-transition:line-height 0;transition:line-height 0;}
#subs-navi:hover,#subs-navi.active{color:#77d0dc;}
#mail-navi{display:block;position:absolute;right:80px;height:100%;color:#595959;z-index:9999;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:line-height 0;-moz-transition:line-height 0;-o-transition:line-height 0;transition:line-height 0;}
#mail-navi:hover,#mail-navi.active{color:#77d0dc;}
#phone-navi{display:block;position:absolute;top:0;right:120px;height:100%;color:#595959;z-index:9999;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:line-height 0;-moz-transition:line-height 0;-o-transition:line-height 0;transition:line-height 0;}
#phone-navi:hover,#phone-navi.active{color:#77d0dc;}
a.tooltip{outline:none;}
a.tooltip strong{line-height:30px;}
a.tooltip:hover{text-decoration:none;}
a.tooltip span{z-index:10;display:none;padding:6px 14px;margin-top:-61px;margin-left:-164px;width:145px;line-height:11px;}
a.tooltip:hover span{display:inline;position:absolute;color:#fff;border:1px solid #595959;background:#595959;}
.callout{z-index:20;position:absolute;top:30px;border:0;left:-12px;}

/*CSS3 extras*/
a.tooltip span{border-radius:5px;}

/* --------------------------------------------------------------------- */

/* 5. NAVIGATION
/* --------------------------------------------------------------------- */

/* ==== 5.1 NAVIGATION CONTAINER ==== */

#navigation-container{position:fixed;top:0;right:0;width:50%;height:100%;overflow:hidden;background:#ebebeb;z-index:1;}

/* ==== 5.2 NAVIGATION LIST ==== */
#main-navigation{position:absolute;top:10%;left:0;width:100%;line-height:2.1;text-align:center;}
#navigation-container .eagle{margin-bottom:40px;}
#navigation-container .tagline{margin-bottom:39px;font-size:80%;line-height:1.3}
#main-navigation li:after{display:block;content:'';width:100%;height:1px;margin:0 auto;background:#d4d4d4;}
#main-navigation li:first-child:before{display:block;content:'';width:100%;height:1px;margin:0 auto;background:#d4d4d4;}
#main-navigation a{display:block;font-weight:200;font-size:1.4em;padding:16px 0;line-height:1;color:#595959;}
#main-navigation a:hover,#main-navigation a.active{color:#77d0dc;background:rgba(255,255,255,0.4);}

/* ==== 5.3 BOTTOM CONTAINER ==== */
#navigation-container .bottom-container{position:absolute;bottom:40px;left:0;width:100%;color:#595959;text-align:center;}
#navigation-container .social-links{color:#595959;padding:12px;}
#navigation-container .social-links a{color:#595959;padding:12px}
#navigation-container .social-links a:hover,#main-navigation a.active{color:#77d0dc;}
#navigation-container .bottom-text{display:block;font-size:0.8em;padding:12px}

/* --------------------------------------------------------------------- */

/* 6. SCROLL DOWN BUTTON
/* --------------------------------------------------------------------- */

.scroll-down-container{position:fixed;bottom:0;left:0;width:100%;z-index:99;}
.scroll-down-container .scroll-down{display:block;width:40px;height:60px;position:absolute;left:50%;bottom:30px;margin-left:-20px;background:url('../images/layout/scroll-down.webp') center no-repeat;z-index:999;-webkit-transition:all 5s;-moz-transition:all 5s;-o-transition:all 5s;transition:all 5s;-webkit-animation-name:jump;-moz-animation-name:jump;-o-animation-name:jump;-ms-animation-name:jump;animation-name:jump;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:normal;-moz-animation-direction:normal;-o-animation-direction:normal;-ms-animation-direction:normal;animation-direction:normal;-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;-ms-animation-duration:2s;animation-duration:2s;}
.scroll-down-container .scroll-down:hover{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;-ms-animation-name:none;animation-name:none;}

/* --------------------------------------------------------------------- */

/* 7. SECTION HEADLINE
/* --------------------------------------------------------------------- */

.section-headline{position:relative;width:100%;color:#fff;line-height:1.3;background-position:center top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
.section-headline.homepage{background-color:#87D4DC;height:90vh;}
.section-headline.homepage h4{font-size:1.2em;font-weight:normal;margin-top:20px;text-transform:none;}
.section-headline.homepage .hawk-white{margin-top:50px;margin-bottom:50px;text-align:center;}
.section-headline.homepage .hawk-white img{width:125px;}
h1.underline:after{margin:30px auto!important;}
@media all and (max-width:740px){
    .section-headline.homepage .hawk-white{float:none;margin:20px auto;padding-bottom:40px;}
    .section-headline.homepage h4{text-align:center;}
    .section-headline.homepage h2{text-align:center;font-size:2em;}
    a.tooltip span{margin-top:16px;margin-left:-170px;}
}
.section-headline.about{background-image:url('../images/about/about-section-headline.webp');}
.section-headline.contact{background-image:url('../images/contact/contact-section-headline.webp');}
.section-headline.blog{background-image:url('../images/blog/blog-section-headline.webp');}
.section-headline.shortcodes{background-image:url('../images/shortcodes/shortcodes-section-headline.webp');}
.section-headline.what-we-do{background-image:url('whatwedo-section-headline.webp');}
.section-headline .row{padding-top:115px;padding-bottom:115px;text-align:center;}
.section-headline h1{margin:0;}
.shadow{text-shadow:0px 0px 9px #333;}
.section-headline h4{font-weight:500;font-size:0.9em;text-transform:uppercase;text-shadow:0px 0px 3px #333;}
.section-headline .scroll-down-container{position:absolute;bottom:40px;left:0px;}
.section-headline .scroll-down-container .scroll-down{display:block;width:100%;height:60px;position:relative;left:0;bottom:auto;margin:0 auto;}

/* --------------------------------------------------------------------- */

/* 8. PORTFOLIO
/* --------------------------------------------------------------------- */

/* ==== 8.1 GRID ==== */

#portfolio{padding:0;}
#portfolio-grid:after{display:block;content:'';clear:both;}
#portfolio-grid li{position:relative;float:left;width:33.33333%;overflow:hidden;}
#portfolio-grid li.double{width:66.66666%;}
#portfolio-grid li img{float:left;width:101%;margin-right:-0.5%;-webkit-transition:all 4s;-moz-transition:all 4s;-o-transition:all 4s;transition:all 4s;}
#portfolio-grid li:after{display:block;content:'';clear:both;}
#portfolio-grid li:hover img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2);}

/* ==== 8.2 LAYER ==== */
#portfolio-grid .layer{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(119,208,220,0.9);filter:alpha(opacity=0);opacity:0;z-index:10;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;}
#portfolio-grid li:hover .layer{filter:alpha(opacity=100);opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);}
#portfolio-grid .layer .plus{display:block;position:absolute;top:0;right:0;width:45px;height:45px;line-height:45px;text-align:center;font-weight:300;font-size:1.6em;color:#fff;background:#595959;}
#portfolio-grid .layer .text{position:absolute;top:50%;left:0;width:100%;margin-top:-45px;text-align:center;color:#fff;}
#portfolio-grid .layer .tag{font-size:0.85em;}
#portfolio-grid .layer h3{margin:0;font-weight:700;line-height:1.3;-webkit-transition:all 0.8s;-moz-transition:all 0.8s;-o-transition:all 0.8s;transition:all 0.8s;}
#portfolio-grid .layer h3:after{background:#fff;height:2px;margin-left:auto;margin-right:auto;margin-bottom:20px;}

/* ==== 8.3 LOAD MORE ==== */
#portfolio-load-more{display:block;width:100%;height:50px;line-height:50px;text-align:center;font-size:0.8em;font-weight:600;color:#fff;background:#77d0dc;}
#portfolio-load-more i{margin-right:5px;}
#portfolio-load-more:hover{background:#7fb4e3;}
#portfolio-load-more i.rotate{-webkit-animation-name:rotate;-moz-animation-name:rotate;-o-animation-name:rotate;-ms-animation-name:rotate;animation-name:rotate;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:normal;-moz-animation-direction:normal;-o-animation-direction:normal;-ms-animation-direction:normal;animation-direction:normal;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s;}

/* ==== 8.4 PROJECT DETAILS ==== */
#portfolio-details{display:none;padding-top:0;}
.portfolio-carousel{margin-bottom:80px;background:#ebebeb;}
.portfolio-carousel .item{width:100%;background-position:center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
#portfolio-details .video-container{margin-bottom:80px;}
#portfolio-details h2{margin-bottom:0;}
#portfolio-details .tag{font-size:0.8em;}
.detail-carousel{margin:80px 0;background:#ebebeb;}
.detail-carousel .item{overflow:hidden;}
.detail-carousel .item img{float:left;height:auto
-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.detail-carousel .item:hover img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2);}
.detail-carousel .owl-controls,.portfolio-carousel .owl-controls{position:absolute;top:50%;right:30px;margin-top:-25px;}
.detail-carousel .owl-controls .owl-page,.portfolio-carousel .owl-controls .owl-page{display:block;width:25px;margin-bottom:10px;text-align:center;zoom:1;*display:inline;/*IE7 life-saver */}
.detail-carousel .owl-controls .owl-page span,.portfolio-carousel .owl-controls .owl-page span{margin:0 auto;}
.detail-carousel .owl-controls .owl-page.active span,.portfolio-carousel .owl-controls .owl-page.active span{border-color:#fff;}

/* ==== 8.5 PORTFOLIO CONTROLS ==== */
#portfolio-controls{position:fixed;top:50%;left:0;margin-top:-45px;z-index:99;-moz-box-shadow:0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:0 0 2px rgba(0,0,0,0.1);box-shadow:0 0 2px rgba(0,0,0,0.1);}
#portfolio-controls:after{display:block;content:'';clear:both;}
#portfolio-controls a{display:block;width:45px;height:45px;line-height:45px;text-align:center;background:#fff;color:#595959;}
#portfolio-controls a:hover{color:#77d0dc;}

/*Custom*/
#table19{position:relative;top:-27%;}

/* --------------------------------------------------------------------- */

/* 9. TEAM
/* --------------------------------------------------------------------- */

.team:after{display:block;content:'';clear:both;}
.team .team-member{position:relative;width:20%;overflow:hidden;float:left;}
.team .team-member:after{display:block;content:'';clear:both;}
.team .team-member img{width:101%;margin:0 -0.5%;float:left;-webkit-transition:all 4s;-moz-transition:all 4s;-o-transition:all 4s;transition:all 4s;}
.team .team-member:hover img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2);}
.team .circle-icon{background:none;border:1px solid #fff;}
.team .circle-icon:hover{background:#fff;color:#77d0dc;}

/* ==== 9.1 LAYER ==== */
.team .team-member .layer{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background:rgba(119,208,220,0.9);filter:alpha(opacity=0);opacity:0;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);transform:scale(0.2);-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.team .team-member:hover .layer{filter:alpha(opacity=100);opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);}
.team .team-member .layer .text{position:absolute;bottom:15%;left:40px;padding:40px 40px 0 0;color:#fff;}
.team .team-member .layer .social-links{padding-bottom:40px;}
.team .team-member .layer h3{margin:0;font-size:1.4em;font-weight:700;line-height:1.25;}
.team .team-member .layer h3:after{background:#fff;background:#fff;height:2px;}
.team .team-member .layer .tag{font-size:0.85em;}

/* --------------------------------------------------------------------- */

/* 10. BLOG
/* --------------------------------------------------------------------- */

/* ==== 10.1 GRID ==== */

#blog{padding:0;}
#blog-grid{padding-top:2px;}
#blog-grid li{position:relative;background:#fff;}
#blog-grid li .image-container{position:relative;overflow:hidden;}
#blog-grid li img{float:left;width:101%;margin-right:-0.5%;-webkit-transition:all 4s;-moz-transition:all 4s;-o-transition:all 4s;transition:all 4s;}
#blog-grid li:after{display:block;content:'';clear:both;}
#blog-grid .content{padding:30px 40px 40px 40px;}
#blog-grid .tags{margin-bottom:5px;font-size:0.85em;text-transform:uppercase;}
#blog-grid .tag{margin-right:10px;}
#blog-grid .tag i{margin-right:2px;}
#blog-grid h3{font-size:1.4em;margin-bottom:0;}
#blog-grid h3.underline:after{margin:0 0 20px 0;}
#blog-grid .content p:last-child{margin:0;}

/* ==== 10.2 LAYER ==== */
#blog-grid .layer{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(119,208,220,0.9);filter:alpha(opacity=0);opacity:0;z-index:10;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;}
#blog-grid li:hover .layer{filter:alpha(opacity=100);opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);}
#blog-grid .layer .plus{display:block;position:absolute;top:0;right:0;width:35px;height:35px;line-height:15px;text-align:center;font-weight:200;font-size:1.6em;color:#fff;background:#595959;z-index:5;}
#blog-grid .layer .button-container{position:absolute;top:50%;left:0;width:100%;margin-top:-30px;text-align:center;}
#blog-grid .layer .button{color:#fff;border-color:#fff;}
#blog-grid .layer .button:hover{background:none;}

/* ==== 10.3 LOAD MORE ==== */
#blog-load-more{display:block;width:100%;height:50px;line-height:50px;text-align:center;font-size:0.8em;font-weight:600;color:#fff;background:#77d0dc;}
#blog-load-more i{margin-right:5px;}
#blog-load-more:hover{background:#7fb4e3;}
#blog-load-more i.rotate{-webkit-animation-name:rotate;-moz-animation-name:rotate;-o-animation-name:rotate;-ms-animation-name:rotate;animation-name:rotate;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:normal;-moz-animation-direction:normal;-o-animation-direction:normal;-ms-animation-direction:normal;animation-direction:normal;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s;}

/* ==== 10.4 BLOG DETAILS ==== */
#blog-details{display:none;padding-top:0;}
.blog-carousel{margin-bottom:80px;background:#ebebeb;}
.blog-carousel .item{width:100%;background-position:center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
#blog-details .video-container{margin-bottom:80px;}
#blog-details h2{margin-bottom:10px;line-height:1.3;}
#blog-details .tag{display:block;margin-bottom:2px;font-size:0.8em;}
#blog-details .tag i{margin-right:3px;}
.blog-carousel .owl-controls{position:absolute;top:50%;right:30px;margin-top:-25px;}
.blog-carousel .owl-controls .owl-page{display:block;width:25px;margin-bottom:10px;text-align:center;zoom:1;*display:inline;/*IE7 life-saver */}
.blog-carousel .owl-controls .owl-page span{margin:0 auto;}
.blog-carousel .owl-controls .owl-page.active span{border-color:#fff;}

/* ==== 10.5 BLOG CONTROLS ==== */
#blog-controls{position:fixed;top:50%;left:0;z-index:99;-moz-box-shadow:0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:0 0 2px rgba(0,0,0,0.1);box-shadow:0 0 2px rgba(0,0,0,0.1);}
#blog-controls:after{display:block;content:'';clear:both;}
#blog-controls a{display:block;width:45px;height:45px;line-height:48px;text-align:center;background:#fff;color:#595959;}
#blog-controls a:hover{color:#77d0dc;}

/* --------------------------------------------------------------------- */

/* 11. CONTACT
/* --------------------------------------------------------------------- */

.contact-row{margin-bottom:7px;}
.contact-row:after{display:block;content:'';clear:both;}
.contact-row .icon-container,.contact-row .info{float:left;}
.contact-row .info{padding:6px 0 0 10px;font-weight:600;font-size:0.9em;}
.contact-form span{display:block;margin-bottom:3px;font-size:0.8em;}

/* --------------------------------------------------------------------- */

/* 12. FOOTER
/* --------------------------------------------------------------------- */

#page-footer{position:relative;width:100%;background:#ebebeb;z-index:1;}
.footer-content{font-weight:800;padding:60px 0;text-align:center;}
.footer-content .button{margin-left:10px;}
.footer-content .text{font-weight:700;font-size:0.9em;color:rgba(0,0,0,0.5);}

/* --------------------------------------------------------------------- */

/* 13. CSS ANIMATIONS
/* --------------------------------------------------------------------- */

/* ==== 13.1 JUMP ==== */
@-moz-keyframes jump{
    0%{-moz-transform:translateY(0);transform:translateY(0);}
    20%{-moz-transform:translateY(-30px);transform:translateY(-30px);}
    50%{-moz-transform:translateY(0);transform:translateY(0);}
    70%{-moz-transform:translateY(-30px);transform:translateY(-30px);}
}
@-webkit-keyframes jump{
    0%{-webkit-transform:translateY(0);transform:translateY(0);}
    20%{-webkit-transform:translateY(-30px);transform:translateY(-30px);}
    50%{-webkit-transform:translateY(0);transform:translateY(0);}
    70%{-webkit-transform:translateY(-30px);transform:translateY(-30px);}
}
@-o-keyframes jump{
    0%{-o-transform:translateY(0);transform:translateY(0);}
    20%{-o-transform:translateY(-30px);transform:translateY(-30px);}
    50%{-o-transform:translateY(0);transform:translateY(0);}
    70%{-o-transform:translateY(-30px);transform:translateY(-30px);}
}
@-ms-keyframes jump{
    0%{-ms-transform:translateY(0);transform:translateY(0);}
    20%{-ms-transform:translateY(-30px);transform:translateY(-30px);}
    50%{-ms-transform:translateY(0);transform:translateY(0);}
    70%{-ms-transform:translateY(-30px);transform:translateY(-30px);}
}
@keyframes jump{
    0%{transform:translateY(0);}
    20%{transform:translateY(-30px);}
    50%{transform:translateY(0);}
    70%{transform:translateY(-30px);}
}
@-moz-keyframes rotate{
    0%{-moz-transform:rotate(0);transform:rotate(0);}
    100%{-moz-transform:rotate(360deg);transform:rotate(360deg);}
}

/* ==== 13.2 ROTATE ==== */
@-webkit-keyframes rotate{
    0%{-webkit-transform:rotate(0);transform:rotate(0);}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@-o-keyframes rotate{
    0%{-o-transform:rotate(0);transform:rotate(0);}
    100%{-o-transform:rotate(360deg);transform:rotate(360deg);}
}
@-ms-keyframes rotate{
    0%{-ms-transform:rotate(0);transform:rotate(0);}
    100%{-ms-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes rotate{
    0%{transform:rotate(0);}
    100%{transform:rotate(360deg);}
}

/* --------------------------------------------------------------------- */

/* 14. TOOLTIP
/* --------------------------------------------------------------------- */


/*Shortcodes.css*/

/*
    1. TYPOGRAPHY
        1.1 HEADLINES
        1.2 LINKS
        1.3 PARAGRAPH
    2. ALIGN AND SPACES
        2.1 ALIGN
        2.2 SPACES
    3. BUTTONS
    4. FORM
    5. ICONS
        5.1 ICONS
        5.2 CIRCLE ICONS
        5.3 FLOAT ICONS
    6. SKILLS
    7. ACCORDION AND TOGGLE
    8. TABS
        8.1 TAB NAVI
        8.2 TAB NAVI HORIZONTAL
        8.3 TAB CONTENT
    9. ALERT BOX
    10. COMMENT CAROUSEL
    11. CLIENT CAROUSEL
    12. COUNTER
    13. GOOGLE MAP
    14. TIMELINE
        14.1 WRAPPER / GRID
        14.2 INNER
        14.3
        14.4
/* --------------------------------------------------------------------- */

/* 1. TYPOGRAPHY
/* --------------------------------------------------------------------- */

/* ==== 1.1 HEADLINES ==== */

h1,h2,h3,h4,h5,h6{font-weight:700;text-transform:uppercase;word-wrap:break-word;}
h1{font-size:2.5em;margin-bottom:25px;}
h2{font-size:1.2em;margin-bottom:25px;}
h3{font-size:1.5em;margin-bottom:20px;}
h4{font-size:1.2em;margin-bottom:30px;}
h5{font-size:1em;margin-bottom:5px;}
h6{font-size:0.8em;}
.serviceHeading,h4{display:inline-block;margin-left:0px;vertical-align:super;}
h1.underline:after,h2.underline:after,h3.underline:after,h4.underline:after,h5.underline:after,h6.underline:after{display:block;content:'';width:40px;height:3px;margin:10px 0 40px 0;background:#70a8da;}
.center h1.underline:after,.center h2.underline:after,.center h3.underline:after,.center h4.underline:after,.center h5.underline:after,.center h6.underline:after{margin:5px auto 25px auto;}

/* ==== 1.2 LINKS ==== */
a{cursor:pointer;color:#70a8da;text-decoration:none;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}

/* ==== 1.3 PARAGRAPH ==== */
p{margin-bottom:30px;font-size:0.9em;}
@media all and (max-width:740px){
    p{font-size:1em;}
}
p.undertitle{max-width:700px;margin:0 auto 60px auto;}

/* --------------------------------------------------------------------- */

/* 2. ALIGN AND SPACES
/* --------------------------------------------------------------------- */

/* ==== 2.1 ALIGN ==== */

.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}

/* ==== 2.2 SPACES ==== */
.space{width:100%;height:80px;}
.space.small{height:40px;}
.space.big{height:120px;}

/* --------------------------------------------------------------------- */

/* 3. BUTTONS
/* --------------------------------------------------------------------- */

.button{display:inline-block;height:45px;line-height:45px;padding:0 28px;background:#70a8da;color:#fff;font-size:0.8em;font-weight:700;text-transform:uppercase;border-bottom:2px solid #4e89be;-webkit-border-radius:45px;-moz-border-radius:45px;border-radius:45px;}
.button:hover{background:#7fb4e3;}
.button.border{color:#70a8da;background:none;border:1px solid #70a8da;}
.button.border:hover{color:#fff;background:#70a8da;}
.button.small{height:35px;line-height:35px;padding:0 22px;font-size:0.75em;}
.button.big{height:55px;line-height:55px;padding:0 34px;font-size:0.85em;}

/* --------------------------------------------------------------------- */

/* 4. FORM
/* --------------------------------------------------------------------- */

input,textarea{display:inline-block;font-family:'Raleway',sans-serif;font-weight:400;line-height:1.7;font-size:0.8em;color:#595959;background:#fff;border:none;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-appearance:none;-moz-appearance:none;}
input.text,textarea{width:100%;margin-bottom:5px;}
input.text{padding:12px 15px;}
input.submit{display:inline-block;font-weight:700;margin-top:15px;height:45px;line-height:45px;padding:0 28px;background:#70a8da;color:#fff;font-size:0.8em;text-transform:uppercase;border-bottom:2px solid #4e89be;cursor:pointer;-webkit-border-radius:45px;-moz-border-radius:45px;border-radius:45px;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
input.submit:hover{background:#7fb4e3;}
textarea{padding:15px;height:150px;}

/* --------------------------------------------------------------------- */

/* 5. ICONS
/* --------------------------------------------------------------------- */

/* ==== 5.1 ICONS ==== */

.icon{display:inline;font-size:2.2em;}
.icon.small{font-size:1.2em;}
.icon.big{font-size:4em;}

/* ==== 5.2 CIRCLE ICONS ==== */
.circle-icon{display:inline-block;width:50px;height:50px;line-height:50px;font-size:1.4em;text-align:center;color:#fff;background:#70a8da;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
a.circle-icon:hover{background:#7fb4e3;}
.circle-icon.border{color:#70a8da;border:1px solid #70a8da;background:none;}
a.circle-icon.border:hover{color:#fff;background:#70a8da;}
.circle-icon.small{width:35px;height:35px;line-height:35px;font-size:1em;}
.circle-icon.big{width:65px;height:65px;line-height:65px;font-size:1.8em;}

/* ==== 5.3 FLOAT ICONS ==== */
.float-icon{position:relative;padding-left:60px;}
.float-icon .icon{position:absolute;top:-5px;left:0;}

/* --------------------------------------------------------------------- */

/* 6. SKILLS
/* --------------------------------------------------------------------- */

.skill-outer{position:relative;width:100%;height:12px;margin:5px 0 25px 0;background:#ebebeb;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.skill-outer .skill-inner{position:absolute;top:0;left:0;height:100%;width:0;background:#70a8da;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.skill-outer .percent{position:absolute;display:none;width:55px;height:28px;line-height:28px;bottom:25px;right:-22px;font-size:0.8em;text-align:center;background:#595959;color:#fff;}
.skill-outer .percent:after{display:block;content:'';position:absolute;bottom:-12px;left:50%;margin-left:-5px;height:0;width:0;border-width:10px;border-style:solid;border-right-width:0;border-color:#595959;border-bottom-color:transparent!important;border-top-color:transparent!important;border-right-color:transparent!important;-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);}

/* --------------------------------------------------------------------- */

/* 7. ACCORDION AND TOGGLE
/* --------------------------------------------------------------------- */

.accordion .title,.toggle .title{display:block;position:relative;margin-bottom:2px;padding:12px 20px;background:#fff;color:#3d3d3d;font-weight:500;font-size:0.9em;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.accordion .title:hover,.toggle .title:hover{color:#70a8da;}
.accordion .title i,.toggle .title i{position:absolute;top:18px;right:20px;}
.accordion .title .fa-minus,.toggle .title .fa-minus{display:none;}
.accordion .content,.toggle .content{display:none;margin-bottom:2px;padding:25px 20px;background:#fff;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.accordion p:last-child,.toggle p:last-child{margin-bottom:0;}

/* --------------------------------------------------------------------- */

/* 8. TABS
/* --------------------------------------------------------------------- */

/* ==== 8.1 TAB NAVI  ==== */

.tab-navi{padding-right:4px;}
.tab-navi a{display:block;margin-bottom:4px;padding:15px 30px;color:#595959;font-size:0.9em;background:#fff;border-left:3px solid #fff;font-weight:500;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.tab-navi a:hover{color:#70a8da;border-left:3px solid #70a8da;}
.tab-navi a.active{border-left:3px solid #70a8da;color:#70a8da;width:102%;}

/* ==== 8.2 TAB NAVI HORIZONTAL  ==== */
.tab-navi.horizontal li{display:inline-block;}
.tab-navi.horizontal a{border-top:3px solid #fff;border-left:none;}
.tab-navi.horizontal a:hover{border-top:3px solid #70a8da;border-left:none;}
.tab-navi.horizontal a.active{border-top:3px solid #70a8da;border-left:none;width:auto;padding:15px 30px 25px 30px;margin-bottom:-10px;}

/* ==== 8.3 TAB CONTENT  ==== */
.tab-content-container{margin-bottom:30px;padding:30px;background:#fff;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.tab-content  p:last-child{margin-bottom:0;}
.tab-content{display:none;}

/* --------------------------------------------------------------------- */

/* 9. ALERT BOX
/* --------------------------------------------------------------------- */

.alert-box{position:relative;margin-bottom:10px;padding:15px 50px 15px 20px;font-size:0.85em;font-weight:400;text-align:left;color:#9f9f9f;background:#f2f2f2;border:1px solid #e2e2e2;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.alert-box a{color:#9f9f9f;}
.alert-box i{width:20px;}
.alert-box .close{display:block;position:absolute;right:10px;top:2px;padding:10px;font-size:1.2em;}
.alert-box .close:hover{filter:alpha(opacity=50);opacity:0.5;}
.alert-box.error,.alert-box.error a{color:#a02119;}
.alert-box.error{border-color:#eed5d5;background:#f4e2e2;}
.alert-box.warning,.alert-box.warning a{color:#c79d0c;}
.alert-box.warning{border-color:#f4f0d4;background:#fbf9e5;}
.alert-box.success,.alert-box.success a{color:#3a7d3a;}
.alert-box.success{border-color:#d6edcd;background:#e5f3e0;}

/* --------------------------------------------------------------------- */

/* 10. COMMENT CAROUSEL
/* --------------------------------------------------------------------- */
/*About Us Page Code*/
.comment-carousel-container{width:100%;text-align:center;background:#fff;}
.comment-carousel-container i{font-size:0.8em;}
.comment-carousel-container .comment{max-width:820px;padding:0 25px;margin:0 auto 20px auto;font-weight:300;}
.comment-carousel-container .name{font-size:0.8em;}
.comment-carousel-container .owl-controls{margin-top:20px;}

/* --------------------------------------------------------------------- */

/* 11. CLIENT CAROUSEL
/* --------------------------------------------------------------------- */
/*Services Page*/
.client-carousel .owl-controls{margin-top:15px;}
.client-carousel .item{margin:0 25px;}
.client-carousel .item img{max-width:150px;filter:alpha(opacity=70);opacity:0.7;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;filter:url('grayscale.svg#greyscale');filter:gray;-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-webkit-filter:grayscale(100%);-o-filter:grayscale(100%);}
.client-carousel .item:hover img{filter:alpha(opacity=100);opacity:1;filter:none;-webkit-filter:grayscale(0%);-moz-filter:grayscale(0%);-ms-filter:grayscale(0%);-webkit-filter:grayscale(0%);-o-filter:grayscale(0%);}

/* --------------------------------------------------------------------- */

/* 12. COUNTER
/* --------------------------------------------------------------------- */
/*About Page*/
.counter:after{display:block;content:'';clear:both;}
.counter li{position:relative;float:left;width:20%;padding:50px 0;color:#fff;background:#70a8da;text-align:center;line-height:1.3;}
.counter li:nth-child(2n){background:#7fb4e3;}
.counter .icon{margin-bottom:5px;}
.counter .number{margin-bottom:5px;font-size:3em;font-weight:700;}
.counter .description{font-size:0.8em;font-weight:700;}

/* --------------------------------------------------------------------- */

/* 13. GOOGLE MAP
/* --------------------------------------------------------------------- */

#googlemap{width:100%;height:400px;}
div.map-popup{position:relative;padding:10px;}
div.map-popup h2{margin-bottom:5px;}
div.map-popup p{font-size:1em;}

/* --------------------------------------------------------------------- */

/* 14. TIMELINE
/* --------------------------------------------------------------------- */

/* ==== 14.1 WRAPPER / GRID ==== */

.timeline-container{color:#fff;background-position:center top;background-repeat:no-repeat;background-image:url(../images/about/timeline-background.webp);-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
.timeline{position:relative;width:100%;overflow:hidden;-ms-touch-action:pan-y;cursor:url(../images/layout/openhand.ico) 4 4,move;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.timeline.grabbing{cursor:url(../images/layout/closedhand.ico) 4 4,move;}
.timeline-grid{position:absolute;bottom:15px;right:0;padding:0 60px;border-bottom:2px solid #595959;}
.timeline-grid li{position:relative;margin:0 15px;padding-bottom:40px;width:400px;float:right;}
.timeline-grid li:after{display:block;content:'';position:absolute;bottom:0;left:50%;margin:0 0 -9px -10px;width:16px;height:16px;background:#595959;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
.timeline-grid:after{display:table;content:'';clear:both;}

/* ==== 14.2 INNER ==== */
.timeline-grid li .inner{position:absolute;bottom:40px;left:0;padding:25px;background:rgba(255,255,255,0.8);color:#595959;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.timeline-grid li .inner:after{display:block;content:'';position:absolute;bottom:-24px;left:50%;margin-left:-8px;height:0;width:0;border-width:16px;border-style:solid;border-right-width:0;border-color:rgba(255,255,255,0.8);border-bottom-color:transparent!important;border-top-color:transparent!important;border-right-color:transparent!important;-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);}
.timeline-grid li .inner .date{display:block;text-transform:uppercase;line-height:1;font-size:0.85em;}
.timeline-grid li .inner p:last-child{margin-bottom:0;}

/* ==== 14.3 YEAR ==== */
.timeline-grid li.date{width:60px;margin:0;}
.timeline-grid li.date:after{display:none;}
.timeline-grid li.date .year{display:block;position:absolute;bottom:-19px;left:-10px;width:80px;height:40px;line-height:38px;text-align:center;font-weight:500;font-size:1.2em;background:#595959;-webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;}

/* ==== 14.4 HOVER ==== */
.timeline-grid li:after{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.timeline-grid li:hover:after{background:#70a8da;transform:scale(1.4);-moz-transform:scale(1.4);-webkit-transform:scale(1.4);}


/*Responsive.css*/

@media screen and (max-width:1160px){

    /* --------------------------------------------------------------------- */

    /* 5. NAVIGATION
    /* --------------------------------------------------------------------- */

    #main-navigation a{font-size:1.2em;padding:15px 0;}
}
@media screen and (max-width:980px){

    /* --------------------------------------------------------------------- */

    /* 1. DOCUMENT SETUP
    /* --------------------------------------------------------------------- */

    body{font-size:95%;}

    /* --------------------------------------------------------------------- */

    /* 5. NAVIGATION
    /* --------------------------------------------------------------------- */

    #navigation-container{width:70%;}

    /* --------------------------------------------------------------------- */

    /* 8. PORTFOLIO
    /* --------------------------------------------------------------------- */

    #portfolio-grid li{width:50%;}
    #portfolio-grid li.double{width:100%;}
    #portfolio-controls{top:auto;bottom:0;left:0;margin-top:0;}
    #portfolio-controls a{float:left;}

    /* --------------------------------------------------------------------- */

    /* 9. TEAM
    /* --------------------------------------------------------------------- */

    .team .team-member{width:50%;}
    .team .team-member .layer h3{font-size:1.2em;}

    /* --------------------------------------------------------------------- */

    /* 10. BLOG
    /* --------------------------------------------------------------------- */

    #blog-grid h3{font-size:1.2em;}
    #blog-controls{top:auto;bottom:0;left:0;margin-top:0;}
    #blog-controls a{float:left;}

    /* --------------------------------------------------------------------- */

    /* 12. COUNTER (SHORTCODES)
    /* --------------------------------------------------------------------- */

    .counter li{width:33.33333%;padding:40px 0;}
}
@media (max-width:849px){

    /* --------------------------------------------------------------------- */

    /* 4. PAGE HEADER
    /* --------------------------------------------------------------------- */

    #logo{left:20px;}
    #open-navi{padding:0 20px;}
    #mail-navi{right:60px;}
    #phone-navi{right:100px;}

    /* --------------------------------------------------------------------- */

    /* 7. SECTION HEADLINE
    /* --------------------------------------------------------------------- */

    .section-headline .scroll-down-container{left:0px;}

    /* --------------------------------------------------------------------- */

    /* 8. TABS (SHORTCODES)
    /* --------------------------------------------------------------------- */

    .tab-navi{padding-right:0;}
    .tab-navi a.active{width:auto;}
    .tab-navi.horizontal li{display:block;}
    .tab-navi.horizontal a.active{border-top:3px solid #70a8da;border-left:none;width:auto;padding:15px 30px;margin-bottom:4px;}
}
@media screen and (max-width:580px){

    /* --------------------------------------------------------------------- */

    /* 5. NAVIGATION
    /* --------------------------------------------------------------------- */

    #navigation-container{width:80%;}

    /* --------------------------------------------------------------------- */

    /* 8. PORTFOLIO
    /* --------------------------------------------------------------------- */

    #portfolio-grid li{width:100%;}
    #portfolio-grid li.double{width:100%;}

    /* --------------------------------------------------------------------- */

    /* 9. TEAM
    /* --------------------------------------------------------------------- */

    .team .team-member{width:50%;}

    /* --------------------------------------------------------------------- */

    /* 10. CONTACT
    /* --------------------------------------------------------------------- */

    .contact-row .icon-container,.contact-row .info{float:none;}
    .contact-row .info{padding:5px 0 10px 0;}

    /* --------------------------------------------------------------------- */

    /* 11. FOOTER
    /* --------------------------------------------------------------------- */

    .footer-content .text{display:block;padding-bottom:10px;}

    /* --------------------------------------------------------------------- */

    /* 1. TYPOGRAPHY (SHORTCODES)
    /* --------------------------------------------------------------------- */

    h1{font-size:2.5em;margin-bottom:30px;}

    /* --------------------------------------------------------------------- */

    /* 12. COUNTER (SHORTCODES)
    /* --------------------------------------------------------------------- */

    .counter li{width:100%;padding:25px 0;}

    /* --------------------------------------------------------------------- */

    /* 14. TIMELINE (SHORTCODES)
    /* --------------------------------------------------------------------- */

    .timeline-grid{padding:0 30px;}
    .timeline-grid li{width:210px;}
    .timeline-grid li.date{width:50px;}
    .timeline-grid li.date .year{left:-25px;}
}
@media screen and (max-height:680px){

    /* --------------------------------------------------------------------- */

    /* 3. WRAPPER
    /* --------------------------------------------------------------------- */

    section{position:relative;padding:50px 0;}

    /* --------------------------------------------------------------------- */

    /* 7. SECTION HEADLINE
    /* --------------------------------------------------------------------- */

    .section-headline .row{padding-top:100px;}
}
@media screen and (max-height:480px){

    /* --------------------------------------------------------------------- */

    /* 5. NAVIGATION
    /* --------------------------------------------------------------------- */

    #main-navigation{top:40px;}
    #main-navigation a{font-size:1em;padding:12px 0;}
    #navigation-container .bottom-container{bottom:20px;}
    #navigation-container .bottom-text{display:none;}
    #navigation-container .social-links{margin-bottom:0;}

    /* --------------------------------------------------------------------- */

    /* 7. SECTION HEADLINE
    /* --------------------------------------------------------------------- */

    .section-headline .row{padding-top:60px;padding-bottom:150px;}
}
@media screen and (max-height:380px){

    /* --------------------------------------------------------------------- */

    /* 5. NAVIGATION
    /* --------------------------------------------------------------------- */

    #navigation-container .bottom-container{display:none;}
}


/*Color.css*/

/* --------------------------------------------------------------------- */

/* 1. FONT COLORS
/* --------------------------------------------------------------------- */

body,#open-navi,#main-navigation a,#navigation-container .bottom-container,#portfolio-controls a,input,textarea,.tab-navi a,.timeline-grid li .inner,#blog-controls a{color:#595959;}
#open-navi:hover,#open-navi.active,#main-navigation a:hover,#main-navigation a.active,#portfolio-controls a:hover,.team .circle-icon:hover,a,.button.border,.circle-icon.border,.circle-icon.white,.accordion .title:hover,.toggle .title:hover,.tab-navi a:hover,.tab-navi a.active,#blog-controls a:hover{color:#77d0dc;}
#portfolio-grid .layer .text{text-shadow:#258f9d 0 0 5px;}
.section-headline,#portfolio-grid .layer .plus,#portfolio-grid .layer .text,#portfolio-load-more,.team .team-member .layer .text,.button,.button.border:hover,input.submit,.circle-icon,a.circle-icon.border:hover,a.circle-icon.white:hover,.skill-outer .percent,.counter li,.timeline-container,#blog-grid .layer .plus,#blog-grid .layer .button,#blog-load-more{color:#fff;}
.footer-content .text{color:rgba(0,0,0,0.5);}

/* --------------------------------------------------------------------- */

/* 2. BACKGROUND COLORS
/* --------------------------------------------------------------------- */

body,#page-preloader,#pagewrapper{background-color:#f7f7f7;}
#page-header,#portfolio-grid .layer h3:after,#portfolio-controls a,.team .circle-icon:hover,.team .team-member .layer h3:after,input,textarea,.circle-icon.white,.accordion .title,.toggle .title,.accordion .content,.toggle .content,.tab-navi a,.tab-content-container,.comment-carousel-container,#blog-grid li,#blog-controls a{background-color:#fff;}
#navigation-container,.portfolio-carousel,.detail-carousel,#page-footer,.skill-outer{background-color:#ebebeb;}
#main-navigation li:after,#main-navigation li:first-child:before{background-color:#d4d4d4;}
#portfolio-load-more,h1.underline:after,h2.underline:after,h3.underline:after,h4.underline:after,h5.underline:after,h6.underline:after,.button,.button.border:hover,input.submit,.circle-icon,a.circle-icon.border:hover,a.circle-icon.white:hover,.skill-outer .skill-inner,.counter li,.timeline-grid li:hover:after,#blog-load-more{background-color:#77d0dc;}
#portfolio-load-more:hover,.button:hover,input.submit:hover,a.circle-icon:hover,.counter li:nth-child(2n),#blog-load-more:hover{background-color:#77d0dc;}
#portfolio-grid .layer,.team .team-member .layer,#blog-grid .layer{background-color:rgba(119,208,220,0.4);}
#portfolio-grid .layer .plus,.skill-outer .percent,.timeline-grid li:after,.timeline-grid li.date .year,#blog-grid .layer .plus{background-color:#595959;}

/* --------------------------------------------------------------------- */

/* 3. BORDER COLORS
/* --------------------------------------------------------------------- */

.detail-carousel .owl-controls .owl-page.active span,.portfolio-carousel .owl-controls .owl-page.active span,.team .circle-icon,.tab-navi a,.tab-navi.horizontal a,#blog-grid .layer .button,.blog-carousel .owl-controls .owl-page.active span{border-color:#fff;}
.button,input.submit{border-color:#45acba;}
input.submit:hover{position:relative;top:-1px;left:-1px;box-shadow:1px 1px 1px #888888;}
.button,input.submit:active{position:relative;top:0;left:0;}
.button.border,.circle-icon.border,.tab-navi a:hover,.tab-navi a.active,.tab-navi.horizontal a:hover,.tab-navi.horizontal a.active{border-color:#77d0dc;}
.skill-outer .percent:after,.timeline-grid{border-color:#595959;}
#buttonHeader{border-color:#FFF;background-color:none;color:#fff;}
#buttonHeader:hover{border-color:#FFF;background-color:#fff;color:#77d0dc;}

/* --------------------------------------------------------------------- */

/* 4. SELECTION COLOR
/* --------------------------------------------------------------------- */::selection{background:#77d0dc;color:#fff;}
::-moz-selection{background:#77d0dc;color:#fff;}

/*Custom.css*/

/* --------------------------------------------------------------------- */

/* DO YOUR CSS CHANGES HERE TO SIMPLIFY UPDATES
/* --------------------------------------------------------------------- */

/*#subscribe-me{right:20px;position:absolute;color:#595959;top:5px;font-size:30px;}
.indicates-required{position:absolute;right:0px;top:115px;}
#mc_embed_signup .mc-field-group .asterisk{top:8px!important;}*/
.md-modal{position:fixed;top:50%;left:50%;width:50%;max-width:630px;min-width:320px;height:auto;z-index:2000;visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);}
/*.md-show{visibility:visible;}*/
.md-overlay{position:fixed;width:100%;height:100%;visibility:hidden;top:0;left:0;z-index:1000;opacity:0;background:rgba(112,168,218,0.9);-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;}
/*.md-show ~ .md-overlay{    opacity: 1;
visibility:visible;}*/

/* General styles for the modal */

/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/
.md-perspective,.md-perspective body{height:100%;   /*overflow: hidden;*/}
.md-perspective body{   /*background: #222;*/
-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;  /*-webkit-perspective: 600px;*/-moz-perspective:600px;  /*perspective: 600px;*/}
.container{ /*background: #e74c3c;*/
min-height:100%;}
/*.md-modal{position:fixed;top:50%;left:50%;width:50%;max-width:630px;min-width:320px;height:auto;z-index:2000;visibility:hidden;backface-visibility:hidden;transform:translateX(-50%) translateY(-50%);}*/
.md-show{visibility:visible;}
/*.md-overlay{position:fixed;width:100%;height:100%;visibility:hidden;top:0;left:0;z-index:1000;opacity:0;background: rgba(143,27,15,0.8);}*/
.md-show ~ .md-overlay{opacity:1;visibility:visible;}

/* Content styles */
/*.md-content{background:#fff;position:relative;border-radius:3px;margin:0 auto;}
.md-content h3{margin:0;padding:0.4em;text-align:center;font-size:2.4em;font-weight:300;opacity:0.8;background:rgba(0,0,0,0.1);border-radius:3px 3px 0 0;}
.md-content > div{padding:15px 40px 30px;margin:0;font-weight:300;font-size:1.15em;}
.md-content > div p{margin:0;padding:10px 0;}
.md-content > div ul{margin:0;padding:0 0 30px 20px;}
.md-content > div ul li{padding:5px 0;}
.md-content button{display:block;margin:0 auto;font-size:0.8em;}*/

/* Individual modal styles with animations/transitions */

/* Effect 19:  Slip in from the top with perspective on container */
/*.md-show.md-effect-19 ~ .container{height:100%;overflow:hidden;}
.md-show.md-effect-19 ~ .md-overlay{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.md-show.md-effect-19 ~ .container,.md-show.md-effect-19 ~ .md-overlay{-webkit-transform-style:preserve-3d;-webkit-transform-origin:50% 100%;-webkit-animation:OpenTop 0.5s forwards ease-in;-moz-transform-style:preserve-3d;-moz-transform-origin:50% 100%;-moz-animation:OpenTop 0.5s forwards ease-in;transform-style:preserve-3d;transform-origin:50% 100%;animation:OpenTop 0.5s forwards ease-in;}
@-webkit-keyframes OpenTop{
    50%{-webkit-transform:rotateX(10deg);-webkit-animation-timing-function:ease-out;}
}
@-moz-keyframes OpenTop{
    50%{-moz-transform:rotateX(10deg);-moz-animation-timing-function:ease-out;}
}
@keyframes OpenTop{
    50%{transform:rotateX(10deg);animation-timing-function:ease-out;}
}*/
/*.md-effect-19 .md-content{-webkit-transform:translateY(-200%);-moz-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);opacity:0;}
.md-show.md-effect-19 .md-content{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition:all 0.5s 0.1s;-moz-transition:all 0.5s 0.1s;transition:all 0.5s 0.1s;}*/
#homepageContainer{position:relative;top:-30px;}
#homepageContainer h1{line-height:40px;}
#homepageContainer h2{margin-top:20px;text-shadow:none;text-transform:none;font-size:1.2em;font-weight:normal;}
#whatWeDo h2{display:inline-block;margin-left:10px;vertical-align:super;}
.section-headline.homepage{position:relative;overflow:hidden;}
.section-headline.homepage video{display:block;position:absolute;top:0;left:0;height:100%;overflow:hidden;width:100%;object-fit:cover;}
@media all and (max-width:767px){
    .section-headline.homepage video{display:none;}
}

.icon {
      color: #77d0dc;
}
/*section.homepage-services-row{padding:0px 0;}
.homepage-services-row h4{display:inline-block;position:relative;top:-5px;}
.homepage-services-row .fa{width:58px;}
.homepage-services-row .fa.fa-rotate-90{-webkit-transform:rotate(90deg) translate(14px,18px);transform:rotate(90deg) translate(14px,18px);}
.homepage-services-row .row.gutters{margin:30px auto;line-height:0.7;}
.homepage-services-row a{color:inherit;font-size:90%;}*/