html,
body, div, span, applet, object, iframe, h1, h2, h3, h4, .tile.text time,
h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,
dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}

html {
    position: static;
    width: 100%;
    height: 100%
}

body{
    height: 100%;
    min-width: 640px;
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}

div,
section,
footer,
aside,
article,
form,
input{
    display: block;
    padding: 0;
    margin: 0;
}

* {
    background-repeat: no-repeat;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

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

h1{
    font-size: 6em;
    line-height: 1em;
}

h2{
    font-size: 40px;
    line-height: 1em;
}

h3{
    font-size: 24px;
    line-height: 1.2em;
}

h4{
    font-size: 20px;
    line-height: 1.2em;
}

h5{
    font-size: 18px;
    line-height: 1.2em;
}

h6{
    font-size: 16px;
    line-height: 1.2em;
}

p{
    font-size: 16px;
    line-height: 1.5em;
    font-family: 'Helvetica Neue', sans-serif;
}

ul{
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

ul{
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

a{
    font-size: 16px;
    color: #222;
    text-decoration: none;
}

a:hover{
    color: #2497c6;
}

/* .container {
    position: relative;
    padding: 0px 10%;
    margin: auto;
}
*/

.typed {
    line-height: 1.4;
    letter-spacing: -0.06em;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
}    

.container {
    margin: 0 auto;
    width: 640px
}

@media (min-width: 0) and (max-width: 656px){.container {
        width: 640px
    }
}

@media (min-width: 657px) and (max-width: 977px){.container {
        width: 640px
    }
}

@media (min-width: 977px) and (max-width: 1296px){.container {
        width: 960px
    }
}

@media (min-width: 1297px) and (max-width: 1400px){.container {
        width: 1280px
    }
}

@media (min-width: 1401px){.container {
        width: 1400px
    }
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}


article {
    width: 100%;
    height: auto;
}

ul li{
    list-style-type: none;
}

.naslov{
    position: absolute;
    width: 100%;
    top: 45%;
    color: #fff;
    text-align: center;
    cursor: default;
    z-index: 2;
    
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.feature-divider{
    background-color: #D9D9D9;
    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fafafa), color-stop(50%, #d9d9d9), color-stop(100%, #fafafa));
    background-image: -webkit-linear-gradient(left, #fafafa, #d9d9d9, #fafafa);
    background-image: -moz-linear-gradient(left, #fafafa, #d9d9d9, #fafafa);
    background-image: -o-linear-gradient(left, #fafafa, #d9d9d9, #fafafa);
    background-image: linear-gradient(left, #fafafa, #d9d9d9, #fafafa);
    height: 1px;
    width: 100%;
}

.feature-divider-footer{
    background-color: #222;
    margin-top: 60px;
    height: 1px;
    width: 100%;
    clear: both;
}

.marg-top{
    margin-top: 70px;
}
/*--- nav ---*/
/* embedded font that has hamburger and x icon */
@font-face {
  font-family: 'sicanstudios-demo';
  src:url('fonts/sicanstudios-demo.eot');
}

@font-face {
  font-family: 'sicanstudios-demo';
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAWoAAsAAAAACQwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAmUAAAPJ8avxu0ZGVE0AAANwAAAAGgAAABxmU0KwR0RFRgAAA4wAAAAdAAAAIAAxAARPUy8yAAADrAAAAE0AAABgUErdwGNtYXAAAAP8AAAASgAAAVrgexZjaGVhZAAABEgAAAAuAAAANv3pFDtoaGVhAAAEeAAAAB4AAAAkBBD/5GhtdHgAAASYAAAADgAAAA4EAAAgbWF4cAAABKgAAAAGAAAABgAEUABuYW1lAAAEsAAAAOwAAAH16Df8JXBvc3QAAAWcAAAADAAAACAAAwAAeJxlkk1oE1EQx2eT3SSNy1ZDIhbWqtcWIeAHxEPBUMR6sNLsIT2JGsWoSQ9JPWiSoq3xsJ5CvBgQD6KFVCgIpQcJohDwozc923N7qaWHlybNOPNeGoRe/szuezP/37wZDXQdNE0L5dK3bmRz+dlUeiZ3OnU7MwOaBzQYE7ZHHPeKY7prel1THw7CUCKErtsPTL97T7wUecOG6qANcNiG2hEbjtrejyHwco0ADMHIbDZ9KRqNHrA56AugPYerMA06J3vAhBGvabkir3eqouq36iIcGRXOpr/jtA9EFmpt5xPCeP1ZBEFbCiB2E6sUnXtK0aEmAjQXEfc2ywieEyXE3ck/dPCtg9hK/kZsZywplLfyZoElbvCPSu+olfxF17+PceJrLlHoFZNlu2aArZ6waZ7tB6gOdh/SseZDTH2wEGqJMyrC1NIa1UYssBRZSiyNvhS5zgqJE2P4MjvPsR+BYSypGHBvnT5b00l2/kKYD9YQ9Mq27CCOMHG9KDsYlH9Vr+B7P8rwDQRj+RTDb9Bn+LGCB20nRlJvcgdX6BTiLPN9udiXhQA3dJYlzw39pGhqi3te5Z4vGwx/YX8QBE+1Gwqe/B4x/DwznGTnr8T1boMx//Y6IPgGy2dDwZMs86VFun5e58S3XCLOxfgVY68UPFmV2HRC2gckSg+qNrX9H6jklsNRtJTzYr/1nYJaGwlKT3SH/W6qmUsGuQfqUduZa5K2xI9elrRbamMkqFobOajdyXUFSmMcV6ByL2nSQo67tzGSlvak0qfNysiwRDXsRu7/EI7rGw5qzt05c8A1g/8AVu305QAAAHicY2BgYGQAgpOd+YYg+lzKy/0wGgBJ3QeoAAB4nGNgZGBg4ANiCQYQYGJgBEJmIGYB8xgABGsANgAAAHicY2BmYmCcwMDKwMHow5jGwMDgDqW/MkgytDAwMDGwMjPAAKMAAwIEpLmmMDgw5H5gYHzw/wGDHuMDBoUGoBqwQiCDQQEIGQEGMgwuAAAAeJxjYGBgZoBgGQZGBhAIAfIYwXwWBgsgzcXAwcAEhAwMuQwVHxj+/wergrP/T/3fLcAI1QsFjGwMqAK0BkwIJjM97cUDAF10C80AAHicY2BkYGAA4qwPfHnx/DZfGbiZGEDgXMrL/Qj6/wMmBsYHQC4HA1gaAEfUDAUAAHicY2BkYGB88P8Bgx4TAwPDPwYgCRRBAcwAbecD9gAAAgAAAAAAAAACAAAgAAAAAAAAUAAABAAAeJydj7FOwzAQhj+3SQWCpQsbklWxMDhKjITUTix0Y+3AVjVRlaGOlKSvws4T8TC8AL9bi4UBqbZO993df/YdcMsHhngMcx4ST8h4STzF8Zk4k+Y7cc6NuU88Y27epDTZtTKLU1fkCVc8J57yzmviTJqvxDl3Jk88Y2EeGWjZsSWIRo7UijuxEzUcxAztbhuG8Vi33eDq5qDUb+0croVB7dH37FW0eApK+ZXs/0/OOq/rWMq8eiue9HQXxnXX7xvri9Ku7J9hlPPeLZ0vK8kvW2ejWn/qjXtY/RxnZ9P0Q9sFWxXlhS//AEv5VgZ4nGNgZsALAAB9AAQ=) format('woff'),
     url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: 'sicanstudios-demo';
  content: attr(data-icon);
  speak: none;
  font-weight: 100;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.8em;
  -webkit-transition: color .4s;
  -moz-transition: color .4s;
  -o-transition: color .4s;
  transition: color .4s;
}

/* when navigation is shown, don’t allow scrolling of content */
body.no_scroll {
  overflow: hidden;
}

/* Firefox fix for overflow: hidden. Scroll bar is hidden and moves everything to the right */
@-moz-document url-prefix() {
  body.no_scroll {
    /*margin-right: 23px;*/
  }

  body.no_scroll .expanded {
    /*padding-right: 7px;*/
    background: rgba(0,0,0,.5); /* because FF no blur, reduce bg transparency */
  }
}

/* === TOP MENU LAYOUT === */
/* ======================= */

nav {
  color: #333;
  position: absolute;
  top: 0;
  width: 100%;
  height: 70px;
  right: 0;
  z-index: 1000;
  cursor: pointer;
  overflow: hidden;
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
  -webkit-transition: -webkit-transform .4s, height .3s, background .4s;
  -moz-transition: -moz-transform .4s, height .3s, background .4s;
  transition: transform .4s, height .3s, background .4s;
  -webkit-animation: firstFadeInAndDrop .5s;
  -moz-animation: firstFadeInAndDrop .5s;
  animation: firstFadeInAndDrop .5s;
}

/* on intial load fade in the menu */
@-webkit-keyframes firstFadeInAndDrop {
  0%   {-webkit-transform: translate(0,-54px);}
  100% {-webkit-transform: translate(0,0);}
}

@-moz-keyframes firstFadeInAndDrop {
  0%   {-moz-transform: translate(0,-54px);}
  100% {-moz-transform: translate(0,0);}
}

@keyframes firstFadeInAndDrop {
  0%   {transform: translate(0,-54px);}
  100% {transform: translate(0,0);}
}

/* on navigation hover add slight white bg */
nav:hover {
  background: rgba(0,0,0,.4);
}

nav:hover .name{
  color: #fff;
}

nav:hover .icon span{
  color: #fff;
}

/* limits width of menu to site width */
.site-width {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1%;
}

/* name of site in main menu (not user selectable) */
.site-width>a {
  font-weight: bold;
  color: #555;
  line-height: 1.9em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* when hidden it goes up */
nav.invisible {
  -webkit-transform: translate(0,-64px);
  -moz-transform: translate(0,-64px);
  -o-transform: translate(0,-64px);
  transform: translate(0,-64px);
  -webkit-transition: -webkit-transform .2s;
  -moz-transition: -moz-transform .2s;
  -o-transition: -o-transform .2s;
  transition: transform .2s;
  opacity: 0;
}

/* when shown & detached position is fixed */
nav.detached {
  position: fixed;
  background: rgba(0,0,0,.4);
  -webkit-transition: -webkit-transform .3s, height .3s, background .4s, opacity .3s;
  -moz-transition: -moz-transform .3s, height .3s, background .4s, opacity .3s;
  -o-transition: -o-transform .3s, height .3s, background .4s, opacity .3s;
  transition: transform .3s, height .3s, background .4s, opacity .3s;
}



/* === MENU NAVIGATION === */
/* ======================= */

/* increases menu width & height */
nav.expanded {
  width: 100%;
  height: 100%;
  position: fixed;
  cursor: default;
  background: rgba(255,255,255,.85);
}

/* positions navigation content */
#navigation {
  -webkit-transform: translate(0,-700px);
  -moz-transform: translate(0,-700px);
  -o-transform: translate(0,-700px);
  transform: translate(0,-700px);
  opacity: 0;
  padding-top: 30px;
  text-align: center;
  -webkit-transition: -webkit-transform .15s, opacity .7s;
  -moz-transition: -moz-transform .15s, opacity .7s;
  -o-transition: -o-transform .15s, opacity .7s;
  transition: transform .15s, opacity .7s;
}

/* shows navigation */
nav.expanded #navigation {
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
  opacity: 1;
}



/* === MENU NAVIGATION CONTENT === */
/* =============================== */

/* adds vertical spacing between menu links */
#navigation ul{
  clear: both;
    padding: 0;
}

#navigation ul li {
  padding: 2em 0;
}

/* makes link font bigger */
#navigation ul a {
  font-size: 3.3em;
  font-weight: 800;
  text-transform: uppercase;    
}

/* subheading span styling */
#navigation ul span {
  font-family: 'Helvetica Neue', serif;
  font-size: .75em;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #666;
  display: block;
}



/* === MENU ICONS === */
/* ================== */

/* adds padding to icons */
.icon {
  position: relative;    
  cursor: pointer;
  float: right;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  margin-top: 1.1em;
  z-index: 99999;    
}

/* hides extra text of icon (accessibility) */
.icon span {
  /*display: none;*/
    font-size: 16px;
    position: absolute;
    margin-top: -12px;
    top: 50%;
    left:-100%;
    margin-left: -20px;
    text-transform: lowercase;
    font-weight: 400;
    color: #fff;
}

.icon_menu{
    margin-top:-10px; 
}

/* on focus, don’t show outline */
.icon:focus {
  outline: none;
}

/* icon colour */
.icon:before, .icon:active:before {
  /*color: #2497c6 ;*/
    color: #fff ;
}

/* changes colour on hover or keyboard focus */
.icon:hover:before, .icon:focus:before {
  color: #333;
}

/* changes icon to an “X” */
.expanded .icon:before {
  content: 'x';
  font-size: 1.4em;
  line-height: 1.4em;
  padding-right: .15em;
}

/* changes icon to an “X” */
.expanded .icon span {
  display: none;
}



/* === CONTENT BLURRING === */
/* ======================== */

/* adds transition to the content */
#container {
  min-height: 100%;
  -webkit-transition: -webkit-transform .2s, filter .2s;
  -moz-transition: -moz-transform .2s, filter .2s;
  -o-transition: -o-transform .2s, filter .2s;
  transition: transform .2s, filter .2s;
}

/* blurring content */
.blurred {
  -webkit-transform: scale(.99);
  -moz-transform: scale(.99);
  -o-transform: scale(.99);
  transform: scale(.99);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
  -webkit-transition: -webkit-transform .5s, -webkit-filter .5s;
  -moz-transition: -moz-transform .5s, -moz-filter .5s;
  -o-transition: -o-transform .5s, -o-filter .5s;
  transition: transform .5s, filter .5s;
}


#logo_container {
    background-color: transparent;
    height: 70px;
    padding: 0 10px;
    float: left;
}

#logo {
    position: relative;
    width: 45px;
    height: 45px;
    /*background-color: #2497c6;*/
    background-image: url(../images/logo.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
    margin-top: 12.5px;
}

.name {
    display: none;
    font-size: 18px;
    position: absolute;
    left: 130%;
    line-height: 40px;
    width: 400%;
    color: #fff;
    font-weight: 400;
}

@media (min-width: 0) and (max-width: 656px){
    .site-width {
      padding: 0 10px;
    }
}
/*--- end nav ---*/

i
/*--- footer ---*/
#glavna_sekcija {
    background-color: #222;
    height: 300px;
    width: 80%;
    float: left;
}

aside {
    background-color: #000;
    height: 300px;
    width: 20%;
    float: right;
}

footer {
    position: absolute;
    background-color:#000; 
    min-height: 70px;
    width: 100%;
    bottom: 0;
}

footer h3{
    color: #DDD;
    font-size: 14px;
    text-align: center;
    font-weight: 400;
    letter-spacing: 1px;
    padding-top: 10px;
}

.footer_logo {
    background-color: transparent;
    margin: auto;
    padding: 0;
    padding-top: 60px;
    width: 100%;
}

.logo {
    position: relative;
    width: 50px;
    height: 50px;
    margin: auto;
    padding-top: 30px;
    background-image: url(../images/logo.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

#copy{
    float: left;
    padding-top: 25px;
}

#copy span{
    font-family: 'Lato', sans-serif;
    color: #686868;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2em;
}

#links{
    float: right;
    padding-top: 10px;
}

#links ul li{
    float: left;
    padding-left: 20px;
}

#links ul li a{
    color:  #686868;
    font-size: 14px;
    font-weight: 400;
}

@media (min-width: 0) and (max-width: 656px){
    #links{
        display: none;
    }
    
    footer h3{
        color: #fff;
        font-size: 18px;
        text-align: center;
        font-weight: 400;
        padding-top: 30px;
    }
    
    #copy{
        float: none;
        text-align: center;
        font-weight: 400;
        font-size: 16px;
        color: #f8f8f8;    
    }
    
    #copy span{
        font-weight: 400;
        font-size: 16px;
        color: #f8f8f8;    
    }
}    

/*--- hero ---*/

#hero {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 800px;
    border-bottom: 1px solid #DDD;
    background-color: #000;
    background-image: url(../images/hero_bck4.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#hero h1 {
    position: relative;
    text-align: center;
    font-weight: 800;
    letter-spacing: 1px;
    padding-bottom: 10px;
    color: #fff;
    text-transform: uppercase;
}

#hero p {
    font-size: 1.3em;
    position: relative;
    text-align: center;
    font-weight: 300;
    width: 60%;
    left: 20%;
    letter-spacing: 1px;
    color: #fff;
}

#hero a{
    position: relative;
    text-align: left;
    font-weight: 400;
    width: 300px;
    left: 0%;
    padding: 2% 0px;
    padding-left: 20px;
    top: 30px;
    letter-spacing: 1px;
    color: #2497c6 ;
    background-image: url(../images/arrow_right.svg);
    background-position: left 52%;
    background-repeat: no-repeat;
    background-size: 8px;
}

@media (min-width: 2000px){
    #hero {
        height: 1000px
    }
}

@media (max-width: 1296px){
    #hero {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        height: 710px;
        /*background-position: -60px bottom;
        background-size: 150%;*/
    }
    
    #hero h1 {
        font-size: 78px !important;
        position: relative;
        text-align: center;
        width: 100%;
        left: 0;
        font-weight: 800;
        letter-spacing: 1px;
        color: #fff;
        text-transform: uppercase;
    }
    
    #hero p {
        position: relative;
        text-align: center;
        font-weight: 400;
        width: 80%;
        left:10%;
        letter-spacing: 1px;
        color: #fff;
    }
}

#opcije {
    position: absolute;
    right: 0;
    top: 0;
    width: 5%;
    height:100%;
}

#opcije ul{
    position: relative;
    height: auto;
    margin: auto;
    padding: 0;
    padding-top: 250px;
}

#opcije ul li{
    width: 10px;
    height: 10px;
    margin-top: 25px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.7;
}

.inactive{
    background-image: url(../images/opcije_inactive.png); 
    cursor: pointer;
}

.active{
    width: 15px !important;
    height: 15px !important;
    margin-left: -2.5px !important;
    background-image: url(../images/opcije_active.png);
}

.dugme {
    font-size:14px;
    font-weight: 300;
    text-decoration: none;
    color: #000;
    padding:6px 20px;
    border: 1px solid #000;
    border-radius: 5px;
    background-color: transparent;
}

.dugme:hover {
    color: #fff;
    background-color: #222;
}

.btn_container {
    margin: auto;
    padding: 0;
    max-width: 50px;
    margin-top: 50px;
}

.white{
    color: #fff;
}

.grey{
    color: #949596 ;
}

.bold{
    font-weight: 400;
}

/*--- programming ---*/

#programming {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 710px;
    background-color: #fff;
}

#programming p {
    position: relative;
    text-align: center;
    font-weight: 300;
    letter-spacing: 1px;
    color: #000;
}

#programming a{
    position: relative;
    text-align: left;
    font-weight: 300;
    width: 300px;
    left: 69%;
    padding: 2% 0px;
    padding-left: 20px;
    top: 30px;
    letter-spacing: 1px;
    color: #2497c6 ;
    background-image: url(../images/arrow_right.svg);
    background-position: left 52%;
    background-repeat: no-repeat;
    background-size: 10px;
}

#programming #hello {
    position: relative;
    background: #222 ;
    padding: 250px 0 320px;
    /*background-image: url(../images/programing_bck.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;*/
}

#programming #hello h1 {
    text-align: center;
    font-size: 90px;
    margin-bottom: 0.8em;
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 100;
}

#programming #hello h1 span {
    color: #ccc;
}

.embedded_img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -328.5px;
    margin-top: -236px;
    width: 657px;
    height: 472px;
    z-index: 1;
}

.embedded_img img{
    max-width: 100%;
}


/* --- contact --- */
#contactpage{
    height: 100%;
}

.contactpage main {
    margin-top: -270px
}

.contactpage main>h2 {
    color: #fff
}

.contactpage #hello {
    background: #232525;
    padding: 150px 0 320px;
    background-image: url(../images/contact_bck.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contactpage #hello h1 {
    text-align: center;
    font-size: 78px;
    margin-bottom: 0.8em;
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contactpage #hello h1 span {
    color: #ccc;
}

.contactpage #hello h5 {
    color: #fff;
    font-weight: 800;
}

.contactpage #hello li {
    color: #ccc;
    width: 49%;
    float: left;
    padding: 16px;
    border-left: 1px solid #454545;
    font-size: 16px;
    text-align: center;
    word-wrap: break-word
}

.contactpage #hello li:first-child {
    border-left: none
}

.contactpage #hello a {
    color: #fff;
    border-bottom: 1px solid #333
}

.contactpage #hello a:hover {
    color: #2497c6
}

.contactpage #our-offices .adress-info {
    width: 100%;
    /*margin-left: 25%;*/
    text-align: center;
    margin-top: 10px;
}

.contactpage #hello ul {
    margin: auto;
}

.contactpage #our-offices .adress-info p {
    color: #999
}

.contactpage #our-offices h2 {
    color: #fff;
    text-align: center;
    /*background-color: #2497c6;*/
    height:250px;
    line-height: 40;
}

.contactpage #our-offices h2 img {
    position: absolute;
    top: 0%;
    left: 50%;
    margin-left: -150px;
    opacity: 1;
    width: 300px;
    height: auto
}

.contactpage #our-offices address {
    font: 16px;
    font-family: 'Roboto Slab', sans-serif;
    color: #666;
}

.contactpage #our-offices address a {
    text-decoration: underline
}

.contactpage #our-offices address a:before {
    content: '•';
    padding: 0 8px 0 4px;
    display: inline-block;
    color: #999
}

.contactpage #our-offices h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 1em;
    -webkit-background-size: cover;
    -ms-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.contactpage #our-offices .info {
    padding: 0 40px;
    width: 50%;
    margin-left: 25%;
    text-align: center;    
}

@media (min-width: 0) and (max-width: 656px){
        .contactpage #hello .container {
        padding: 0 40px
    }

    .contactpage #hello h1 {
        margin-bottom: 1.5em
    }

    .contactpage #hello li {
        width: 100%;
        font-size: 28px;
        border-left: none;
        border-bottom: 1px solid #454545;
        padding: 92px 16px
    }

    .contactpage #hello li:first-child {
        border-top: 1px solid #454545
    }

    .contactpage #hello h5 {
        font-size: 64px;
        margin-bottom: 0.2em
    }

    .contactpage #our-offices h4, .contactpage #our-offices .tile.text time,
    .tile.text .contactpage #our-offices time {
        margin: 60px 0
    }

    .contactpage #our-offices .adress-info {
        width: 100%;
        margin: 0;
        font-size: 18px;
        height:450px;    
    }

    .contactpage #our-offices h2 {
        line-height: 60px;
        margin: 0;
        width:100%;
    }

    .contactpage #our-offices h2 span {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer
    }
    
    .contactpage #our-offices h2 img {
        top: 10%;
    }   

    .contactpage #our-offices address {
        height: 64px;

    }

    .contactpage #our-offices address a[href^="mailto:"] {
        display: none
    }

    .contactpage #our-offices .info {
        width: 100%;
    margin-left: 0%;
        overflow: hidden;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s    
    }


    .contactpage #our-offices .info.expanded {
        padding-top: 36px;
        height: 212px
    }

    .contactpage #our-offices .black.button {
        width: 200px;
        height: 54px;
        line-height: 54px;
        font-size: 16px
    }

    .contactpage #social {
        padding: 64px 0
    }
}

@media (min-width: 657px) and (max-width: 977px){.contactpage #hello h5 {
        font-size: 30px
    }

    .contactpage #hello ul {
        padding-top: 32px
    }

    .contactpage #hello li {
        padding: 24px 16px 54px
    }

    .contactpage #hello li:nth-child(3) {
        border: none
    }

    .contactpage #our-offices h2 {
        font-size: 44px;
        height: 180px;
        line-height: 0px;
        margin-top:  10px;
    }

    .contactpage #our-offices .adress-info {
        width: 100%;
        margin-left: 0%;
        font-size: 13px;
    }

    .contactpage #our-offices address {
        height: 60px;
    }

    .contactpage #our-offices address a[href^="mailto:"] {
        display: none
    }

    .contactpage #our-offices .black.button {
        width: 120px;
        height: 40px;
        line-height: 40px
    }

    .contactpage #social {
        padding: 60px 0
    }

    .contactpage #social .social {
        width: 48px;
        height: 48px
    }
}

@media (min-width: 977px) and (max-width: 1296px){.contactpage #hello h1 {
        padding: 0 120px
    }

    .contactpage #hello li {
        width: 50%;
    }

    .contactpage #our-offices h2 {
        /*height: 270px;*/
        line-height: 60px;
        margin-bottom: 0.5em;
    }

    .contactpage #our-offices .adress-info {
        height: 440px;
        font-size: 18px;
        margin-top: 0px;
    }

    .contactpage #our-offices address {
        height: 60px
    }
    
    .contactpage #our-offices h2 img {
        top: 10%;
    } 
}

@media (min-width: 1297px){.contactpage #hello h1 {
        padding: 0 240px
    }

    .contactpage #our-offices h2 {
        height: 210px;
        line-height: 0;
    }

    .contactpage #our-offices .adress-info {
        height: 400px;
        font-size: 16px
    }

    .contactpage #our-offices address {
        height: 20px;
        margin-bottom: 1em;
    }

    .contactpage #social {
        padding: 100px 0
    }
}

button {
    border: 0
}

.button {
    cursor: pointer;
    text-decoration: none !important;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    color: #fff;
    -webkit-transition: background-color 0.3s, opacity 0.3s;
    -moz-transition: background-color 0.3s, opacity 0.3s;
    -o-transition: background-color 0.3s, opacity 0.3s;
    transition: background-color 0.3s, opacity 0.3s
}

.button:hover {
    background-color: #2497c6 !important;
    color: #fff
}

.button.black {
    background: #000;
    width: 160px;
    height: 54px;
    line-height: 54px;
    font-size: 13px
}

.contactpage #our-offices .black.button {
        width: 200px;
        height: 54px;
        line-height: 54px;
        font-size: 17px;
        margin-bottom: 30px;
    }

.arrow-down {
    z-index: 10;    
    color: #fff;
    margin-top: -160px;
}

.arrow-down:after {
    content: '↓';
    position: absolute;
    padding: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    font-family: Heiti, 'Lato' !important;
    font-size: 50px
}

main.arrow-down {
    padding-top: 92px;
    padding-bottom: inherit
}

main.arrow-down:after {
    bottom: auto;
    top: 0;
    color: #fff;
    -webkit-transition: color 0.2s ease-in;
    -webkit-transition-delay: 0.4s;
    -moz-transition: color 0.2s ease-in 0.4s;
    -o-transition: color 0.2s ease-in 0.4s;
    transition: color 0.2s ease-in 0.4s
}

main.arrow-down.scroll:after {
    color: #fff
}


/*--- or regular clients ---*/
#clients {
    position: relative;
    height: 250px;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    border-bottom: 1px solid #DDD;
}

#clients h3{
    text-align: center;
    padding-top: 30px;
    font-weight: 400;
    color: #000;
}

#carousel_wrap {
    position: relative;
    width: 100%;
    height: 140px;
    margin: 0;
    top: 30px;
    left: 0;
    background-color: transparent;
}

.arrow {
    position: absolute;
    top: 50%;
    margin-top: -22px;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}