/* 0. CSS Reset /*-----------------------------------------------------------------------------------*/ *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: 400; } ol, ul, li { list-style: none; } caption, th { text-align: left; } q:before, q:after { content: ''; } * { outline: none; } strong { font-weight: 700; } em { font-style: italic; } a img { border: none; } /* clearfix */ .clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; } /* End hide from IE Mac */ .none { display: none; } .clear { clear: both; padding-bottom: 20px; } /* End Clearfix */ /* 1. Global Classes /*-----------------------------------------------------------------------------------*/ .fl { float: left; } .fr { float: right; } /* alignment */ .align-right { text-align: right; } .align-left { text-align: left; } .align-center { text-align: center; } img { border: 0; max-width: 100%; vertical-align: middle; } a, a:active { text-decoration: none; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; -ms-transition: color 0.2s; -o-transition: color 0.2s; transition: color 0.2s; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font: normal 14px/18px 'Open Sans', Helvetica, Arial, sans-serif; position: relative; background-color: #f6f6f6; color: #5e5e5e; } textarea, input { font-family: 'Open Sans', Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { line-height: 1.3em; padding-bottom: 20px; } h1 { font-size: 42px; } h2 { font-size: 40px; } h3 { font-size: 36px; } h5 { font-size: 24px; } h4 { font-size: 18px; } h6 { font-size: 12px; } /* 2. Colors /*-----------------------------------------------------------------------------------*/ #logo a .dinamic-logo { background-image: url('images/diligent-letters.png'); width: 200px; height: 70px; background-size: 190px; background-repeat: no-repeat; } .icon-postit { background-image: url('images/icon_postit.png') } .about-icon1,.about-icon2,.about-icon3, .services-icon1,.services-icon2, .services-icon3,.services-icon4 { background-position: 50% 50%; } .about-icon1 { background-image: url('images/icon1.png'); } .about-icon2 { background-image: url('images/icon2.png'); } .about-icon3 { background-image: url('images/icon3.png'); } .services-icon1 { background-image: url('images/icon4.png'); } .services-icon2 { background-image: url('images/icon5.png'); } .services-icon3 { background-image: url('images/icon6.png'); } .services-icon4 { background-image: url('images/icon7.png'); } #navigation ul li a:hover, #navigation ul li.active a, #mobile-navigation ul li a:hover, .dark .section-title h2, .team-item h3, #footer .recent-tweets ul li a, #footer .recent-tweets ul li a:visited, p .bold-team-info, .welcome-box p.info, #footer .widget h3 .obold, #footer .widget_text a, #footer .widget_text a:visited, #footer .widget_text a:active { color: #993c95; } .welcome-box .outer-hex, .services-item .outer-hex, #calendar tr.days th, .current-events .outer-hex, #calendar .cur-day, .bar-graph .bar-month, .bar-graph .graph li.bar, .gragh-info-symbol, .about-item .outer-hex, .important-info .outer-hex, .recent-tweets .hex-area, .recent-tweets .outer-hex, .team-item .skill-degree.full, .contact-form input#submit, .map-marker .pin, .general-section .flex-control-paging li a.flex-active, .general-section .flex-control-paging li a:hover, .progress-bar, #footer .newsletter .hex-area, #footer .newsletter .outer-hex, .team-item .socials .social.facebook .outer-hex:hover, .team-item .socials .social.facebook .hex-area:hover, .team-item .socials .social.twitter .outer-hex:hover, .team-item .socials .social.twitter .hex-area:hover, .team-item .socials .social.google-plus .outer-hex:hover, .team-item .socials .social.google-plus .hex-area:hover, .team-item .socials .social.dribbble .outer-hex:hover, .team-item .socials .social.dribbble .hex-area:hover, .gallery-item .socials .social.fav .hex-area:hover, .gallery-item .socials .social.fav .outer-hex:hover, .gallery-item .socials .social.facebook .hex-area:hover, .gallery-item .socials .social.facebook .outer-hex:hover, .gallery-item .socials .social.twitter .hex-area:hover, .gallery-item .socials .social.twitter .outer-hex:hover { background: #993c95 !important; } #calendar tr.days { border-color: #993c95; } #header-wrap, #navigation ul li.active .nav-active-mark, #calendar table, .team-item .skill-degree.full:before, #calendar .cur-day:before, .bar-graph .bar-month:before, .gragh-info-symbol:before, .general-section .flex-control-paging li a.flex-active:before, .general-section .flex-control-paging li a:hover:before, #mobile-navigation { border-bottom-color: #993c95; } .team-item .skill-degree.full:after, #calendar .cur-day:after, .bar-graph .bar-month:after, .gragh-info-symbol:after, .general-section .flex-control-paging li a.flex-active:after, .general-section .flex-control-paging li a:hover:after { border-top-color: #993c95; } .gallery-item-overlay:hover .outer-hex { background-color: rgba(0,184,173,0.5); } /* Dark Color */ .dark { color: #afafaf; background-color: #1d1d1d; } .dark .section-title h5 { color: #fff; } /* 3. General /*-----------------------------------------------------------------------------------*/ /* bebas neue Font */ @font-face { font-family: 'bebas_neue'; src: url('styles/fonts/bebasneue-webfont.eot'); src: url('styles/fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), url('styles/fonts/bebasneue-webfont.woff') format('woff'), url('styles/fonts/bebasneue-webfont.ttf') format('truetype'), url('styles/fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg'); font-weight: normal; font-style: normal; } /* Flex Slider */ #container .flexslider { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; background: transparent; border: none; } /* Grid */ .one_half { width: 48%; } .one_third { width: 30.66666666666667%; } .two_third { width: 65.33333333333333%; } .one_fourth { width: 22%; } .three_fourth { width: 74%; } .one_fifth { width: 16.8%; } .two_fifth { width: 37.6%; } .three_fifth { width: 58.4%; } .four_fifth { width: 79.2%; } .one_sixth { width: 13.33%; } .five_sixth { width: 82.67%; } .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { position: relative; margin-right: 4%; float: left; display: inline; } .last { margin-right: 0 !important; clear: right; } /* All sections */ .general-section { width: 940px; margin: 0 auto; position: relative; } .partner, #events, #stats, #news, #contact, #gallery { padding: 155px 0 85px; } #gallery .slides { margin-top: 100px; } #contact:not(.our_partners) { /* margin-top:-53px; */ } #about-section, #services-section, #events-wrap, #news-wrap { border-top: 5px solid #ddd; } /* Hexagon */ .hive { position: relative; } .outer-hex { position: relative; margin: 0 auto; width: 194px; height: 224px; } .hex { overflow: hidden; visibility: hidden; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .hex-in1, .hex-in2, .hex-area { width: 100%; height: 100%; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -o-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg); } .hex-in1 { overflow: hidden; } .hex-in2 { visibility: visible; } .inner-hex { position: relative; margin: 0 auto; top: 14px; height: 196px; width: 168px; } /* Section Title */ .section-title { position: absolute; left: 0; top: 0; padding-top: 40px; z-index: 1; } .section-title h2 { font: 72px 'bebas_neue', Helvetica, Arial, sans-serif; color: #1d1d1d; padding: 0; margin-bottom: -10px; } .section-title h5 { font-size: 18px; color: #5e5e5e; padding: 0; font-weight: lighter; } /* SectionTriangle */ .section-triangle, .section-triangle-dark, .section-triangle-grey { background: url(images/section_triangle.png) no-repeat; width: 123px; height: 36px; position: absolute; top: -1px; left: 50%; margin-left: -61.5px; } .section-triangle-dark { background: url(images/section_triangle_black.png) no-repeat; height: 41px; top: -5px; } .section-triangle-grey { background: url(images/section_triangle_grey.png) no-repeat; } /* Socials */ .socials .social { margin: 0 auto; text-align: center; } .socials .social .outer-hex { width: 49px; height: 69px; } .socials .social .inner-hex { width: 35px; height: 42px; } .socials .social .hex-area { display: table; } .socials .social.facebook .hex-area, .socials .social.facebook .outer-hex, .contact-social.facebook .hex-area, .contact-social.facebook .outer-hex { background-color: #004d7e !important; transition: background-color 0.4s ease; } .socials .social.fav .outer-hex, .socials .social.fav .hex-area { background-color: #bf357d; } .socials .social.twitter .hex-area, .socials .social.twitter .outer-hex, .contact-social.twitter .hex-area, .contact-social.twitter .outer-hex { background-color: #3bd4e2; } .socials .social.google-plus .hex-area, .socials .social.google-plus .outer-hex, .contact-social.google-plus .hex-area, .contact-social.google-plus .outer-hex { background-color: #da5534; } .socials .social.dribbble .hex-area, .socials .social.dribbble .outer-hex, .contact-social.dribbble .hex-area, .contact-social.dribbble .outer-hex{ background-color: #de006e; } .socials .social.pinterest .hex-area, .socials .social.pinterest .outer-hex, .contact-social.pinterest .hex-area, .contact-social.pinterest .outer-hex { background-color: #cd1e28; } .socials .social.skype .hex-area, .socials .social.skype .outer-hex, .contact-social.skype .hex-area, .contact-social.skype .outer-hex { background-color: #01aef2; } .socials .social.youtube .hex-area, .socials .social.youtube .outer-hex, .contact-social.youtube .hex-area, .contact-social.youtube .outer-hex { background-color: #db2824; } .socials .social.tumblr .hex-area, .socials .social.tumblr .outer-hex, .contact-social.tumblr .hex-area, .contact-social.tumblr .outer-hex{ background-color: #2c4762; } .socials .social.rss .hex-area, .socials .social.rss .outer-hex, .contact-social.rss .hex-area, .contact-social.rss .outer-hex { background-color: #fe9900; } .socials .social.linkedin .hex-area, .socials .social.linkedin .outer-hex, .contact-social.linkedin .hex-area, .contact-social.linkedin .outer-hex{ background-color: #0073b2 !important; } .socials .social i { color: #fff; font-size: 20px; text-align: center; display: table-cell; vertical-align: middle; } .socials li { display: inline-block; } /* Simple Hexagon */ .team-item .skill-degree, #calendar .cur-day, .bar-graph .bar-month, .gragh-info-symbol, .pin-hex, .general-section .flex-control-paging li a { position: relative; } .team-item .skill-degree:before, #calendar .cur-day:before, .bar-graph .bar-month:before, .gragh-info-symbol:before, .pin-hex:before, .general-section .flex-control-paging li a:before { content: ""; position: absolute; left: 0; width: 0; height: 0; } .team-item .skill-degree:after, #calendar .cur-day:after, .bar-graph .bar-month:after, .gragh-info-symbol:after, .pin-hex:after, .general-section .flex-control-paging li a:before, .general-section .flex-control-paging li a:after { content: ""; position: absolute; left: 0; width: 0; height: 0; } /* Flexslider Paging */ .general-section .flex-control-paging li { margin: 0 3px; } .general-section .flex-control-paging li a { width: 14px; height: 8px; display: inline-block; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: #595959; } .general-section .flex-control-paging li a:before { top: -3px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 3px solid #595959; } .general-section .flex-control-paging li a:after { bottom: -3px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 3px solid #595959; } /* 4. Header /*-----------------------------------------------------------------------------------*/ #header-wrap { background-color: #000; border-bottom-style: solid; border-bottom-width: 3px; position: fixed; z-index: 13; width: 100%; } #header { height: 70px; } #header.active_dropdown { height: initial; } /* Logo */ #logo { /* padding-top: 22px; */ display: inline-block; } /* Navigation */ #navigation { float: right; color: #fff; margin-top: 32px; } #navigation > ul > li { font-family: 'bebas_neue', Helvetica, Arial, sans-serif; font-size: 17px; float: left; margin-left: 26px; position: relative; } #navigation ul li a, #navigation ul li a:active, #mobile-navigation ul li a, #mobile-navigation ul li a:active { font-family: 'bebas_neue', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 17px; color: #fff; } #navigation ul li.active .nav-active-mark { width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom-style: solid; border-bottom-width: 10px; position: absolute; bottom: -18px; /*left: 43%;*/ left: 50%; transform: translateX(-50%); } .link.active .nav-active-mark { bottom: -11px!important; } /* Mobile Navigation */ #mobile-navigation { background-color: #000; width: 300px; margin: -7px auto; padding: 20px 20px 0; border-bottom-width: 3px; border-bottom-style: solid; position: relative; z-index: 999; font-weight: bold; color: #fff; top: 15px; display: none; } #mobile-navigation ul li { padding-bottom: 20px; } a.mobile-nav-toggle { margin: 12px auto 3px; width: 20px; display: block; color: #777; display: none; } a.mobile-nav-toggle i { font-size: 24px; } .mobile-submenu { display: none; padding-top: 15px; } .mobile-submenu li { padding-left: 10px; } /*#mobile-navigation .service-link, #mobile-navigation .industries-link { padding-bottom: 0px; }*/ /* 5. Intro /*-----------------------------------------------------------------------------------*/ #intro-section { /*background: url(images/intro_bg.png) no-repeat center fixed;*/ /*background: url(images/bcp.png) no-repeat center fixed;*/ background: url(images/main-bg.png) no-repeat center fixed; height: 100vh; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; } #intro { height: 560px; position: relative; } #hexagon-overlay { background: url(images/hexagon_pat.png) repeat; width: 100%; height: 100vh; position: absolute; left: 0; top: 0; opacity: .5; } .welcome-box { margin: 0 auto; padding-top: 221px; text-align: center; } .welcome-box .outer-hex { width: 246px; height: 282px; } .welcome-box .inner-hex { width: 220px; height: 254px; } .welcome-box .outer-hex { background-color: #00000082 !important; } .welcome-box .welcometext, .welcome-box .sitename { font-family: 'bebas_neue', Helvetica, Arial, sans-serif; font-weight: normal; color: #fff; padding: 0; } .welcome-box h2.welcometext { font-size: 18px; padding-top: 90px; margin-bottom: -13px; } .welcome-box h3.sitename { font-size: 50px; margin-bottom: -7px; } .welcome-box p.info { font-size: 12px; font-weight: bold; } .welcome-box .hex-area { background-image: url('images/diligent.png'); background-size:255px; background-position-x: -15px; } .chosen-item-1 .outer-hex, .chosen-item-2 .outer-hex, .chosen-item-3 .outer-hex, .note-1 .outer-hex { width: 124px; height: 140px; } .chosen-item-1 .inner-hex, .chosen-item-2 .inner-hex, .chosen-item-3 .inner-hex, .note-1 .inner-hex { width: 98px; height: 112px; } .chosen-item-1 { position: absolute; bottom: 129px; right: 47px; } .chosen-item-2 { position: absolute; bottom: 37px; right: -5px; } .chosen-item-3 { position: absolute; bottom: 37px; right: 100px; } .note-1 { position: absolute; top: 110px; left: 33px; z-index: 2; } .note-1 .note-tooltip1 { position: inherit; font-size: 24px; color: #e5e5e5; font-weight: normal; font-family: 'bebas_neue', Helvetica, Arial, sans-serif; top: 50px; left: 125px; width: 100px; } .note-1 .note-tooltip2 { position: inherit; font-size: 18px; color: #959595; font-weight: normal; font-family: 'bebas_neue', Helvetica, Arial, sans-serif; top: 75px; left: 125px; width: 100px; } /* 6. About /*-----------------------------------------------------------------------------------*/ #about-section, #contact-section { overflow: hidden; } .about-item, .serevices-item { text-align: center; padding: 180px 0; } .about-item .outer-hex, .services-item .outer-hex { width: 104px; height: 120px; } .about-item .inner-hex, .services-item .inner-hex { width: 78px; height: 92px; } .important-info { position: absolute; bottom: 60px; left: 50%; margin-left: -280px; height: 55px; width: 560px; background-color: #1d1d1d; z-index: 8; text-align: center; } .important-info p { font-size: 14px; padding-top: 18px; color: #eee; } .important-box .outer-hex { width: 49px; height: 69px; } .important-box .inner-hex { width: 35px; height: 42px; } .about-item .hex-area, .important-box .hex-area, .services-item .hex-area { background-color: #1d1d1d; display: table; } .about-item i, .important-box i, .services-item i { color: #fff; font-size: 40px; text-align: center; display: table-cell; vertical-align: middle; } .important-box i { font-size: 20px; } .important-box { position: inherit; top: -7px; } .important-box.fl { left: -24px; } .important-box.fr { right: -24px; } .about-item h3 { font-size: 24px; padding: 10px 0; } .about-item p { font-size: 12px; } .about-item.highlight { background-color: #fff; } /* 7. Team /*-----------------------------------------------------------------------------------*/ .team-members { padding-top: 155px; } .team-item { margin: 0 auto; text-align: center; padding-bottom: 85px; } .team-item h3 { font-size: 30px; font-weight: bold; padding: 20px 0 0; } .team-item h6 { font-size: 12px; font-weight: bold; padding: 0; color: #fff; } .team-item p { padding: 15px 0 20px; width: 200px; margin: 0 auto; } .team-item .outer-hex { width: 288px; height: 332px; } .team-item .inner-hex { width: 264px; height: 304px; } .team-item .outer-hex { background-color: #000; transition: background-color 0.8s ease; } .team-item .socials { padding-top: 122px; display: none; } .team-item .skills .skill { padding: 5px 0; } .team-item .skill-degree { width: 12px; height: 7px; background: #595959; } .team-item .skill-degree:before { top: -3px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 3px solid #595959; } .team-item .skill-degree:after { bottom: -3px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 3px solid #595959; } .team-item .skill-name, .team-item .skill-degree { display: inline-block; } .team-item .skill-name { padding-right: 10px; font-weight: bold; color: #fff; } .team-item .skill-degree { margin-right: 2px; } .team-item .member-face { background-position: 50% 50%; } /* 8. Services /*-----------------------------------------------------------------------------------*/ .services-intro { padding-bottom: 100px; } .services-item .hive { float: left; width: 25%; } .services-item { padding-bottom: 35px; } .services-item .services-info { float: right; width: 75%; padding-left: 20px; } .services-item .services-info h3 { padding: 27px 0 0; font-size: 24px; font-weight: bold; } /* 9. Gallery /*-----------------------------------------------------------------------------------*/ .gallery-item { width: 181px; float: left; margin-right: 4px; } .gallery-item .gallery-info { display: block; position: relative; top: -999px; } .gallery-box .gallery-item:nth-child(n+5) { margin-top: -81px; } .gallery-box .gallery-4s-first { margin-left: 92px; } .gallery-box { text-align: center; } .gallery-item .outer-hex { width: 206px; height: 242px; } .gallery-item .inner-hex { width: 180px; height: 214px; } .gallery-item-overlay .outer-hex { width: 181px; height: 214px; } .gallery-item-overlay .inner-hex { width: 150px; height: 185px; } .gallery-item-overlay .hex-area { background-color: rgba(0,0,0,0.1); } .gallery-item-overlay .outer-hex { background-color: transparent; } .gallery-item .socials { padding-top: 60px; } .gallery-item .socials li { padding: 0 2px; } .gallery-item .socials .social .outer-hex { width: 24px; height: 46px; } .gallery-item .socials .social .inner-hex { width: 17px; height: 21px; } .gallery-item .socials .social i { font-size: 13px; color: #1d1d1d; } .gallery-item-overlay h5 { font-size: 11px; color: #fff; font-weight: bold; padding: 0; } .gallery-item-overlay h6 { font-size: 10px; color: #8b8b8b; font-weight: lighter; } .gallery-item-overlay:hover .hex-area { background-color: rgba(0,0,0,0.8); } .gallery-item-overlay:hover .outer-hex { background-color: rgba(243,178,2,0.5); } #gallery .flex-control-nav { bottom: -80px; } /* 10. Events /*-----------------------------------------------------------------------------------*/ #calendar { width: 45%; } #calendar table { width: 287px; height: 287px; font-size: 14px; font-weight: bold; text-align: center; color: #fff; margin: 0 auto; border-bottom-width: 5px; border-bottom-style: solid; } #calendar td { border: 1px solid #2e2e2e; background-color: #232323; padding: 3px; } #calendar th { background-color: #232323; font-size: 11px; font-weight: bold; padding: 3px; text-align: center; color: #232323; } #calendar tr.days { border-width: 1px; border-style: solid; } #calendar th#month-name { font-size: 14px; color: #fff; border: 1px solid #2e2e2e; } #calendar th#prev, #calendar th#next { font-size: 18px; border: 1px solid #2e2e2e; } #calendar a:link, #calendar a:visited{ color: #fff; } #calendar .cur-day { width: 24px; height: 12px; left: 8px; display: table; } #calendar .cur-day:before { top: -5px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom-width: 5px; border-bottom-style: solid; } #calendar .cur-day:after { bottom: -5px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top-width: 5px; border-top-style: solid; } #calendar .cur-day span { display: table-cell; vertical-align: middle; color: #1d1d1d; } .current-events { border-right: 13px solid #1d1d1d; width: 51%; padding: 80px 60px 60px 0; position: relative; margin-top: -70px; } .current-events .outer-hex { width: 70px; height: 96px; } .current-events .inner-hex { width: 50px; height: 69px; } .current-events .top-event .outer-hex, .current-events .bottom-event .outer-hex { width: 35px; height: 62px; } .current-events .top-event .inner-hex, .current-events .bottom-event .inner-hex { width: 25px; height: 34.5px; } .current-events .event { position: inherit; margin-bottom: 30px; } .current-events .event .hive { position: absolute; top: 0; right: -102px; } .current-events .event .hex-area, .current-events .top-event .hex-area, .current-events .bottom-event .hex-area { background-color: #1d1d1d; display: table; } .current-events .event span { color: #fff; font-size: 24px; font-weight: bold; text-align: center; display: table-cell; vertical-align: middle; } .current-events .event h3 { font-size: 24px; font-weight: bold; color: #5e5e5e; padding: 0; } .current-events .event h5 { font-size: 12px; font-weight: bold; color: #5e5e5e; padding: 0 0 15px; } .current-events .event p { width: 350px; } .current-events .top-event { position: absolute; top: -15px; right: -24px; } .current-events .bottom-event { position: absolute; bottom: -15px; right: -24px; } /* 11. Stats /*-----------------------------------------------------------------------------------*/ .bar-graph { width: 700px; height: 400px; color: #eee; position: relative; margin: 50px auto 70px; font-weight: bold; } .bar-graph ul.y { width: 60px; position: absolute; bottom: -42px; left: -70px; text-align: right; } .bar-graph ul.y li { width: 100%; height: 50px; float: left; position: relative; } .bar-graph ul.x { width: 100%; height: 50px; position: absolute; bottom: -70px; left: 0; text-align: center; } .bar-graph ul.x li { width: 40px; float: left; margin-right: 17px; } .bar-graph .graph { width: 100%; height: 100%; border: 2px solid #020300; background: url(images/stats_pat.png) repeat; position: relative; } .bar-graph .graph li.bar { width: 40px; float: left; position: absolute; bottom: 0; } .bar-graph .graph li.bar-1 { left: 17px; } .bar-graph .graph li.bar-2 { left: 74px; } .bar-graph .graph li.bar-3 { left: 131px; } .bar-graph .graph li.bar-4 { left: 188px; } .bar-graph .graph li.bar-5 { left: 245px; } .bar-graph .graph li.bar-6 { left: 302px; } .bar-graph .graph li.bar-7 { left: 359px; } .bar-graph .graph li.bar-8 { left: 416px; } .bar-graph .graph li.bar-9 { left: 473px; } .bar-graph .graph li.bar-10 { left: 530px; } .bar-graph .graph li.bar-11 { left: 587px; } .bar-graph .graph li.bar-12 { left: 644px; } .bar-graph .bar-month { width: 40px; height: 20px; top: 5px; left: 18px; display: table; } .bar-graph .bar-month:before { top: -9px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom-width: 9px; border-bottom-style: solid; } .bar-graph .bar-month:after { bottom: -9px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top-width: 9px; border-top-style: solid; } .bar-graph .bar-month span { display: table-cell; vertical-align: middle; color: #1d1d1d; } h5.bar-gragh-caption { font-size: 14px; position: absolute; top: -35px; left: -20px; } h6.gragh-info { position: absolute; top: -35px; right: 10px; } .gragh-info-symbol { width: 14px; height: 8px; display: inline-block; margin-right: 10px; } .gragh-info-symbol:before { top: -3px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom-width: 3px; border-bottom-style: solid; } .gragh-info-symbol:after { bottom: -3px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top-width: 3px; border-top-style: solid; } .pie-charts { display: table; margin: 0 auto; } .pie-charts canvas { left: 0; position: absolute; top: 0; } .pie-charts .chart { position: relative; line-height: 160px; text-align: center; height: 160px; width: 160px; font-size: 39px; font-weight: bold; color: #eee; } .pie-charts ul { padding-top: 70px; } .pie-charts ul li { display: inline-block; padding: 0 40px; } .pie-charts .chart-label { padding: 15px 0 0; font-size: 18px; font-weight: bold; } /* 12. News /*-----------------------------------------------------------------------------------*/ .news-item { text-align: center; } .centered { background-position: 50% 50%; } .news-item h3.news-title, .news-item h5.news-subtitle { font-size: 24px; font-weight: bold; padding: 0; } .news-item h5.news-subtitle { font-size: 12px; padding-bottom: 10px; } .news-item p { padding-bottom: 15px; } .news-image .outer-hex { width: 256px; height: 292px; } .news-image .inner-hex { width: 230px; height: 270px; } .news-image-overlay .outer-hex { width: 231px; height: 264px; } .news-image-overlay .inner-hex { width: 200px; height: 243px; } .news-image-overlay .hex-area { background-color: rgba(0,0,0,0.1); } .news-image-overlay .outer-hex { background-color: transparent; } #news .flex-control-nav { bottom: -80px; } /* 13. Contact /*-----------------------------------------------------------------------------------*/ .map-area { height: 550px; position: relative; } .map-pos-1 { position: absolute; top: 200px; left: 150px; } .map-pos-2 { position: absolute; top: 163px; right: 170px; } .map-pos-3 { position: absolute; bottom: 70px; left: 330px; } .map-marker .map-marker-info { float: right; padding-left: 20px; color: #afafaf; width: 250px; } .map-marker .map-marker-info h3 { color: #eee; font-size: 14px; font-weight: bold; padding: 0 0 5px; } .map-marker .map-marker-info h6 { font-size: 12px; font-weight: normal; padding: 0; } .map-marker-pin { float: left; } .map-marker .pin-hex { width: 12px; height: 7px; background: #1d1d1d; z-index: 3; top: -2px; left: -11px; } .map-marker .pin-hex:before { top: -3px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 3px solid #1d1d1d; } .map-marker .pin-hex:after { bottom: -3px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 3px solid #1d1d1d; } .map-marker .pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: #89849b; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin: -20px 0 0 -20px; z-index: 2; } .map-marker .pulse { border-radius: 50%; height: 14px; width: 14px; position: relative; bottom: 10px; margin: 11px 0px 0px -12px; transform: rotateX(55deg); -webkit-transform: rotateX(55deg); z-index: 1; } .map-marker .pulse:after { content: ""; border-radius: 50%; height: 40px; width: 40px; position: absolute; margin: -13px 0 0 -13px; animation: pulsate 1s ease-out; animation-iteration-count: infinite; -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0; box-shadow: 0 0 1px 2px gray; -webkit-box-shadow: 0 0 1px 2px gray; animation-delay: 1.1s; -webkit-animation-delay: 1.1s; } @keyframes pulsate { 0% { transform: scale(0.1, 0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2, 1.2); opacity: 0; color: gray; } } @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(0.1, 0.1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.2, 1.2); opacity: 0; color: gray; } } .contact-form h3, .contact-form h5, .contact-socials h3, .contact-socials h5 { font-size: 12px; font-weight: lighter; padding: 0 0 20px; text-align: left; } .contact-form h3, .contact-socials h3 { font-size: 18px; padding: 0; font-weight: bold; color: #fff; } input.input-txt, textarea.textarea-txt { border: none; background-color: #2c2c2c; color: rgba(175,175,175,0.4); padding: 8px 10px; margin-bottom: 13px; width: 300px; font-size: 12px; font-weight: lighter; } textarea.textarea-txt { width: 400px; } .contact-form input#submit { /*width: 84px; height: 24px;*/ color: #fff; border: none; font-size: 14px; font-weight: bold; float: right; padding: 8px 12px; margin-right: 52px; cursor: pointer; border-radius: 24px; transition: opacity 300ms; } .contact-form input#submit:disabled { background-color: #d1d1d1!important; } .g-recaptcha { display: inline-block; } .contact-form .error { border: 1px solid rgba(192,57,43,0.4) !important; } .contact-success { background-color: rgba(22, 160, 133, 0.3); padding: 20px; margin-bottom: 20px; color: #eee; width: 100%; } .contact-success h3 { font-style: 14px; font-weight: bold; padding: 0 0 10px; } .contact-socials { text-align: center; } .contact-socials .contact-social { float: left; margin-right: 5px; } .contact-socials .contact-social.contact-socials-3s-first { margin-left: 49px; } .contact-socials .contact-social:nth-child(n+6) { margin-top: -55px; } .contact-social .outer-hex { width: 93px; height: 142px; background-color: #4a4949 !important; } .contact-social .inner-hex { width: 80px; height: 120px; } .contact-social-overlay .outer-hex { width: 81px; height: 114px; } .contact-social-overlay .inner-hex { width: 76px; height: 87px; left: -1px; } .contact-socials .contact-social-overlay .hex-area { background-color: rgba(0,0,0,0.1); display: table; } .contact-socials .contact-social-overlay .outer-hex { background-color: transparent; } .contact-socials .contact-social-overlay i { color: #fff; font-size: 40px; text-align: center; display: table-cell; vertical-align: middle; } .map-marker-info ul { margin-top: 3px; } .map-marker-info ul li { font-size: 11px; } .progress { width: 150px; height: 8px; background: #595959; position: relative; } .progress-bar { width: 0px; height: 8px; } .progress-caption { } /* 14. Footer /*-----------------------------------------------------------------------------------*/ #footer-wrap { background-color: #000; padding: 40px 0 15px; color: #afafaf; } #footer-wrap .copyright-wrapper { height: 22px; background-color: #993c95; color: #000; text-align: center; position: absolute; width: 100%; left: 0; bottom: 0; } #footer .widget { margin-bottom: 25px; } #footer .widget .footer-logo { background-image: url('images/footer_logo.png'); width: 113px; height: 18px; margin-bottom: 15px; } #footer .widget h3 { color: #eee; font-size: 24px; font-family: 'bebas_neue', Helvetica, Arial, sans-serif; font-weight: normal; padding: 0 0 5px; text-align: left; } #footer .widget h5 { font-size: 11px; padding: 0 0 25px; text-align: left; } #footer .recent-tweets ul li { color: #cdcdcd; clear: both; display: inline-block; margin-top: -10px; } #footer .recent-tweets .twitter-content { float: right; width: 85%; padding: 18px 0 0 5px; } #footer .recent-tweets .tweet_time a { color: #fff; font-style: italic; } #footer .newsletter .newsletter-elements { position: relative; width: 288px; } #footer .newsletter input#newsletter-email { width: 260px; margin-bottom: 0; } #footer .recent-tweets .hive { float: left; } #footer .newsletter .hive { position: absolute; top: -16px; right: 29px; } #footer .newsletter .hive .outer-hex { width: 28px; height: 63px; } #footer .newsletter .hive .inner-hex { width: 29px; height: 36px; } #footer .recent-tweets .hive .outer-hex{ width: 34px; height: 69px; } #footer .recent-tweets .hive .inner-hex { width: 35px; height: 42px; } #footer .recent-tweets .hive .hex-area, #footer .newsletter .hive .hex-area { display: table; } #footer .recent-tweets .hive i, #footer .newsletter .hive i { color: #1d1d1d; font-size: 20px; text-align: center; display: table-cell; vertical-align: middle; } #footer .newsletter .hive i { font-size: 15px; } #footer .flickr .outer-hex { width: 82px; height: 90px; } #footer .flickr-item:hover { opacity: .5; } #footer .borderonh { border: 3px solid #fff; } #footer .flickr .inner-hex { width: 65px; height: 76px; top: 0; } #footer .flickr { text-align: center; } #footer .flickr-item { width: 67px; float: left; } #footer .flickr-item.flickr-item-3s { margin-left: 34px; } #footer .flickr-item:nth-child(n+7) { margin-top: -32px; } #footer .flickr_badge_image { display: none; } .recent-tweets h5 { padding-bottom: 15px !important; } .tweets-container .twitter-content .tweet_time a:visited{ color: white !important; } /*Custom effects*/ .typewriter h1 { overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid white; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .15em; /* Adjust as needed */ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } .resume-cont::after { content: ""; position: absolute; top: 0; left: 0; background-image: url("images/file-upload.png"); background-size: cover; height: 30px; width: 30px; cursor: pointer; z-index: 1; } /* .btn-delete-file:after { content: ""; position:absolute; background-image: url("images/trash-icon.png"); background-size: cover; top: 0; right: 0; height: 30px; width: 30px; pointer-events: none; z-index: 1; } */ /* 15. Media Query /*-----------------------------------------------------------------------------------*/ @media (max-width: 1024px){ #container { overflow-x:hidden;} .map-marker{ visibility: hidden !important; } } @media (min-width: 940px){ .typewriter-div{ text-align: center; color:white; /*margin-top:80px*/ } } @media (min-width: 940px) and (max-width: 1024px) { .general-section { width: 920px; } .gallery-item .outer-hex { width: 180px; height: 232px; } .gallery-item .inner-hex { width: 170px; height: 206px; } .gallery-item-overlay .outer-hex { width: 171px; height: 206px; } .gallery-item-overlay .inner-hex { width: 140px; height: 175px; } .gallery-item { width: 180px; } .gallery-box .gallery-item:nth-child(n+5) { margin-top: -74px; } .gallery-box .gallery-4s-first { margin-left: 91px; } .gallery-item .socials { padding-top: 50px; } } @media (min-width: 768px) and (max-width: 939px) { .general-section { width: 720px; } #header-wrap { position: static; } #header { height: 110px; } #navigation { float: left; } #navigation { display: none; } a.mobile-nav-toggle { display: block; } #logo { display: block; text-align: center; } #hexagon-overlay { top: 93px; } .gallery-item .outer-hex { width: 156px; height: 195px; } .gallery-item .inner-hex { width: 130px; height: 164px; } .gallery-item-overlay .outer-hex { width: 131px; height: 164px; } .gallery-item-overlay .inner-hex { width: 100px; height: 135px; } .gallery-item { width: 130px; } .gallery-box .gallery-item:nth-child(n+5) { margin-top: -78px; } .gallery-box .gallery-4s-first { margin-left: 67px; } .gallery-item .gallery-info { display: block; } .gallery-item .socials { padding-top: 25px; } .current-events .event h3 { font-size: 20px; } .pie-charts ul li { padding: 0 38px; } .news-image .outer-hex { width: 216px; height: 252px; } .news-image .inner-hex { width: 190px; height: 230px; } .news-image-overlay .outer-hex { width: 191px; height: 224px; } .news-image-overlay .inner-hex { width: 160px; height: 203px; } .map-pos-1, .map-pos-2, .map-pos-3 { position: static; float: left; margin: 40px 30px; clear: both; } .contact-socials .contact-social.contact-socials-3s-first { margin-left: 34px; } .contact-socials .contact-social:nth-child(n+6) { margin-top: -53px; } .contact-social .outer-hex { width: 63px; height: 112px; } .contact-social .inner-hex { width: 50px; height: 90px; } .contact-social-overlay .outer-hex { width: 51px; height: 84px; } .contact-social-overlay .inner-hex { width: 46px; height: 57px; left: -1px; } .contact-socials .contact-social-overlay i { font-size: 25px; } textarea#message-txt { width: 300px; } #footer .newsletter .newsletter-elements { width: 238px; } #footer .newsletter input#newsletter-email { width: 210px; } #footer .recent-tweets .twitter-content { width: 75%; } #footer .recent-tweets ul li { margin-top: -10px; } #footer .flickr-item { width: 48px; } #footer .flickr .outer-hex { width: 56px; height: 70px; } #footer .flickr .inner-hex { width: 45px; height: 56px; } #footer .flickr-item.flickr-item-3s { margin-left: 24px; } #footer .flickr-item:nth-child(n+7) { margin-top: -29px; } #logo a .dinamic-logo { position: relative; left: 50%; top: 50%; width: 200px; height: 70px; margin-left: -82px; } } @media only screen and (max-width: 767px) { .portfolio-partners { margin: 0!important; padding: 0!important; } .portfolio-partners .contact-social, .contact-socials.portfolio-partners .contact-social.contact-socials-3s-first { float: none; margin-left: 0px; } .portfolio-partners.contact-socials .contact-social:nth-child(n+6) { margin-top: 0px; } .partner-descritpion { padding-bottom: 40px; } .general-section { width: 520px; } #header-wrap { position: static; } #header { height: 93px; } #navigation { display: none; } a.mobile-nav-toggle { display: block; } #logo { display: block; text-align: center; } #hexagon-overlay { top: 93px; } .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth { margin-right: 0; display: block; margin-bottom: 30px; width: 100% !important; margin-left: 0; } #intro { text-align: center; } .note-1, .welcome-box, .chosen-item-1, .chosen-item-2, .chosen-item-3 { position: static; } .note-1 { padding-bottom: 60px; } .note-1 .note-tooltip1, .note-1 .note-tooltip2 { position: absolute; margin-top: 90px; /*margin-left: 85px;*/ } .note-1 .note-tooltip1 { margin-top: 0px; left: 46px; } .welcome-box { padding-top: 0; padding-bottom: 50px; } .chosen-item-1, .chosen-item-2, .chosen-item-3 { display: inline-block; } .section-title { position: static; } .services, .gallery, .events, .stats, .news, .contact { padding: 0; } .about-item, .team-item { padding: 40px 0 0; } .about .about-item:nth-child(2) { padding-top: 100px; } .about-item.highlight { background-color: transparent; } .important-info { bottom: auto; top: 150px; } .team-wrap, .gallery-wrap, .stats-wrap { background-position: top !important; } .team .section-triangle { background-image: url("images/section_triangle_grey.png"); } .services-intro { padding: 70px 0; text-align: center; } .gallery-item .outer-hex { width: 118px; height: 170px; } .gallery-item .inner-hex { width: 94px; height: 139px; } .gallery-item-overlay .outer-hex { width: 93px; height: 139px; } .gallery-item-overlay .inner-hex { width: 75px; height: 110px; } .gallery-item { width: 100px; margin-left: -4px; } .gallery-box .gallery-item:nth-child(n+5) { margin-top: -84px; } .gallery-box .gallery-4s-first { margin-left: 46px; } .gallery-item .gallery-info { display: block; padding-top: 40px; } .gallery-item .socials { display: none; } .gallery-item-overlay h5, .gallery-item-overlay h6 { font-size: 10px; } .current-events { margin-top: -40px; } .bar-graph { width: 520px; } .bar-graph .bar-month { width: 22px; height: 10px; top: 5px; left: 18px; } .bar-graph .bar-month:before { top: -4px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom-width: 4px; } .bar-graph .bar-month:after { bottom: -4px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top-width: 4px; } .bar-graph .bar-month span { font-size: 10px; font-weight: normal; } .bar-graph ul.x li, .bar-graph .graph li.bar { width: 22px; } .bar-graph .graph li.bar-1 { left: 17px; } .bar-graph .graph li.bar-2 { left: 55px; } .bar-graph .graph li.bar-3 { left: 94px; } .bar-graph .graph li.bar-4 { left: 133px; } .bar-graph .graph li.bar-5 { left: 173px; } .bar-graph .graph li.bar-6 { left: 211px; } .bar-graph .graph li.bar-7 { left: 250px; } .bar-graph .graph li.bar-8 { left: 289px; } .bar-graph .graph li.bar-9 { left: 327px; } .bar-graph .graph li.bar-10 { left: 367px; } .bar-graph .graph li.bar-11 { left: 406px; } .bar-graph .graph li.bar-12 { left: 444px; } .pie-charts ul { padding: 50px 0; } .pie-charts ul li { padding: 0 5px; } .news .flex-control-nav { bottom: -20px; } .map-pos-1, .map-pos-2, .map-pos-3 { position: static; float: left; margin: 40px 30px; clear: both; } .contact-form input#submit { float: left; } #logo a .dinamic-logo { position: relative; left: 50%; top: 50%; width: 165px; height: 48px; margin-left: -82px; background-position: center; background-size: 135px; } } @media only screen and (max-width: 600px) { .important-info { width: 475px; margin-left: -237px; } .bar-graph { width: 480px; } .current-events { width: 90% !important; } .note-1 .note-tooltip1, .note-1 .note-tooltip2 { /* position: absolute; margin-top: 90px; margin-left: 85px; */ } } @media only screen and (max-width: 480px) { /* #contact { margin: 0 auto; } */ #contact:not(.our_partners) { margin-top: 0; } .gallery-box .gallery-4s-first { margin:0 auto; } .typewriter-span{ font-size: 3rem !important; } .general-section { width: 90%; } #mobile-navigation { width: 250px; } .section-title h2 { font-size: 45px; } .section-title h5 { font-size: 15px; } .chosen-item-1 .outer-hex, .chosen-item-2 .outer-hex, .chosen-item-3 .outer-hex { width: 62px; height: 70px; } .chosen-item-1 .inner-hex, .chosen-item-2 .inner-hex, .chosen-item-3 .inner-hex { width: 49px; height: 56px; } .important-info { margin-left: -122px; width: 245px; top: 125px; } .important-info p { font-size: 10px; padding: 10px 35px; } .services-intro h3 { font-size: 24px; } .services-item .services-info { padding-left: 45px; } .services-item .services-info h3 { font-size: 15px; } .gallery-item { width: 204px; float: none; margin: 0 auto; } .gallery-box .gallery-item:nth-child(n+5) { margin-top: 0; } .gallery-item .outer-hex { width: 206px; height: 242px; } .gallery-item .inner-hex { width: 180px; height: 214px; } .gallery-item-overlay .outer-hex { width: 181px; height: 214px; } .gallery-item-overlay .inner-hex { width: 150px; height: 185px; } .gallery-item .socials { display: block; padding-top: 20px; } .current-events { margin-top: 20px; } .current-events .event h3 { font-size: 12px; } .current-events .event h5 { font-size: 10px; font-weight: normal; } .current-events .event p { width: 100%; } #calendar table { width: 270px; } h5.bar-gragh-caption { left: 0; font-size: 12px; top: -20px; } h6.gragh-info { font-size: 10px; top: -40px; } .bar-graph { width: 260px; } .bar-graph ul.y { left: -65px; font-size: 10px; } .bar-graph ul.x li, .bar-graph .graph li.bar { width: 10px; } .bar-graph ul.x li { margin-right: 11px; } .bar-graph .bar-month { width: 16px; height: 6px; top: 0; left: 5px; } .bar-graph .bar-month:before { top: -2px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom-width: 2px; } .bar-graph .bar-month:after { bottom: -2px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top-width: 2px; } .bar-graph .bar-month span { font-size: 8px; } .bar-graph .graph li.bar-1 { left: 7px; } .bar-graph .graph li.bar-2 { left: 28px; } .bar-graph .graph li.bar-3 { left: 48px; } .bar-graph .graph li.bar-4 { left: 69px; } .bar-graph .graph li.bar-5 { left: 90px; } .bar-graph .graph li.bar-6 { left: 111px; } .bar-graph .graph li.bar-7 { left: 131px; } .bar-graph .graph li.bar-8 { left: 152px; } .bar-graph .graph li.bar-9 { left: 173px; } .bar-graph .graph li.bar-10 { left: 194px; } .bar-graph .graph li.bar-11 { left: 216px; } .bar-graph .graph li.bar-12 { left: 236px; } .pie-charts ul li { padding: 0 0 60px; display: block; } input.input-txt, textarea.textarea-txt { width: 220px; } textarea.textarea-txt { width: 250px; } .contact-socials .contact-social.contact-socials-3s-first { margin-left: 29px; } .contact-socials .contact-social:nth-child(n+6) { margin-top: -53px; } .contact-social .outer-hex { width: 53px; height: 102px; } .contact-social .inner-hex { width: 40px; height: 80px; } .contact-social-overlay .outer-hex { width: 41px; height: 74px; } .contact-social-overlay .inner-hex { width: 36px; height: 47px; left: -1px; } .contact-socials .contact-social-overlay i { font-size: 25px; } .note-1 .note-tooltip1, .note-1 .note-tooltip2 { position: absolute; /* margin-top: 90px; margin-left: -45px; */ } } /*Custom effects*/ .typewriter-div{ text-align: center; color:white; } .typewriter-span{ font-size: 4rem; } .typed-cursor { -webkit-animation: typed-blink 0.7s infinite; animation: typed-blink 0.7s infinite; opacity: 1; display: inline-block; } @keyframes typed-blink { 0% { opacity : 1; } 50% { opacity : 0; } 100% { opacity : 1; } } .typed-container{ line-height: 60px; }