/* SETUP */
body
{
  margin:0;
  padding:0;
}

div,ul,ol,li,section,p
{
  position:relative;
  margin:0;
  padding:0;
}

a {
  cursor:pointer;
  text-decoration:none;
}

em {
  font-weight:100;
}

strong, b {
  font-weight:500;
}

.clear {
  clear: both;
}

/* CSS */

/* RESPONSIVE */

@media screen and (min-width: 1600px) {

    header {
      font-size:18px !important;
    }
    
}

@media screen and (min-width: 1216px) {

    header {
      font-size:14px;
    }

    #menu-button {
      display:none;
    }
    
    #top-menu p {
      color: #ececec;
      margin: 6px 0 0 200px;
    }

    #top-menu p span {
      margin-left:24px;
    }

    #top-menu div {
      display:block !important;
      position: absolute;
      right: 18px;
      top: 6px;
      text-transform: uppercase;
    }

    #top-menu div a {
      color:#ececec;
      margin-left:12px;
    }

    #case-study {
      display:flex;
	  background-position: top center;
	  background-image: url(images/20567774l.jpg);
    }

    #case-menu {
      order:1;
      min-width:320px;
      width: calc(50% - 47px);
      border-left: 1px solid #202043;
    }

    .cases {
      order:2;
      min-width:320px;
      width:50%;
    }

    .cases-content {
      padding: 48px;
      color: #ececec;
      text-align: justify;
      font-size: 14px;
      line-height: 24px;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#878787+0,000000+100&1+0,0+100 */
      background: -moz-linear-gradient(top,  rgba(135,135,135,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  rgba(135,135,135,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    }

    #case2,#case3,#case4,#case5 {
      display:none;
    }

    #case-menu .active {
      background:#202043 !important;
    }

    #case-menu .menu-item {
      display: block;
      margin-bottom: 1px;
      background: #878787;
      padding: 12px 16px;
      margin-left: 48px;
      color: #ececec;
      line-height: 18px;
      text-transform: uppercase;
	    font-weight: 500;
	    font-size: 14px;
    }
    
    .column {
        max-width: 46%;
        min-width: 360px;
    }    
    
    .news-wrapper p {
        clear: none !important;
    }

    img.news-image {
        float:left;
        padding: 12px 24px 0 144px;
    }    

}

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

    #menu-button {
      display:block;
      background: #ececec;
      color: #202042;
      font-weight: 500;
      width: 64px;
      text-align: center;
      position: absolute;
      top: 6px;
      right: 6px;
    }

    #top-menu p {
      display:none;
    }

    #top-menu div {
      display:none;
      position: absolute;
      right: 0;
      top: 48px;
      text-transform: uppercase;
      width: 320px;
      background: #ececec;
    }

    #top-menu div a {
      color: #202042;
      display: block;
      padding: 0 24px;
      border-bottom: 1px solid #202042;
      border-left: 1px solid #202042;
    }

    #case-study {
      display:block;
	  background-position: top right;
	  background-image: url(images/20567774s.jpg);
    }
    
    #case-menu > p {
      margin-left:0 !important;
      text-align:center;
    }

    #case-menu {
      order:1;
    }

    .cases {
      order:2;
    }

    .cases-content {
      padding: 12px;
      color: #ececec;
      text-align: justify;
      font-size: 14px;
      line-height: 24px;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#878787+0,000000+100&1+0,0+100 */
      background: -moz-linear-gradient(top,  rgba(135,135,135,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  rgba(135,135,135,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    }

    #case2,#case3,#case4,#case5 {
      display:none;
    }

    #case-menu .active {
      background:#202043 !important;
    }

    #case-menu .menu-item {
      display: block;
      margin-bottom: 1px;
      background: #878787;
      padding: 12px 16px;
      color: #ececec;
      line-height: 18px;
      text-transform: uppercase;
	    font-size: 14px;
	    font-weight: 500;
    }

}

@media screen and (min-width: 1024px) {

    #tab-menu .menu-item {
      padding: 28px 48px 27px;
      font-size: 36px;
    }

    #tab-menu .active {
      padding-left: 47px;
      padding-right: 47px;
      padding-bottom: 28px;
    }

    .tabs {
      padding: 96px 192px;
    }
    
    #case-study {
      padding: 96px 192px;
    }    

	#news-left {

	}

	#news-right {

	}	
	
    .news-wrapper p,.news-wrapper h2 {
        margin-left:144px !important;
        margin-right:144px !important;
    }
    
    #nc2.news-container {
        padding-left:192px !important;
        padding-right: 192px !important;
	}

    #contact-info {
        padding: 0 192px;        
    }
    
    #contact-info div+div {
        width: inherit;
        margin-bottom: 0 !important;
    }
    
    #contact-info > div:first-child {
        margin: inherit !important;
    }    
	
}

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

    #tab-menu .menu-item {
      padding: 28px 24px 27px;
      font-weight:500;
    }

    #tab-menu .active {
      padding-left: 23px;
      padding-right: 23px;
      padding-bottom: 28px;
    }
    
    .tabs {
      padding: 48px
    }
    
    #case-study {
      padding: 48px;
    }

}

@media screen and (min-width: 480px) {
  
  #tab-menu .menu-item {
    display: block;
    text-transform: uppercase;
    color: #202042;
    border-bottom:1px solid #202042;  
  }

  #tab-menu .active {
    border-left:1px solid #202042;
    border-right:1px solid #202042;
    border-bottom:0;
    padding-bottom: 28px;
  }
  
    .news-container h2 {
        font-size: 36px !important;
    }
    
}

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

	#content #tab-menu {
	   background: none !important;
	}

	#tab-menu .menu-item {
        color: #202042;
        padding-right:12px;
        padding-left:12px;
	}

	#tab-menu .active {
	   text-decoration:underline;
	}
  
	.case-header {
		color: #fff !important;
		font-size: 18px !important;
		line-height: 24px !important;
		font-weight: 500;
	}  

	#content p, #content li, .news-container p, .news-container li {
		font-size: 14px;
		text-align: left !important;
		line-height: 24px;
	}
	
	.cases-content p {
		text-align: left;
	}
	
	#contact-info div+div {
        margin-bottom: 48px;	
	}
    
}

/* GENERAL */

body {
  font-family: 'Roboto', sans-serif;
  font-weight:300;
  font-size: 18px;
  line-height: 36px;
  background:#ECECEC;
}

h2.section-title {
  position: absolute;
  opacity: 0;
}

header {
  height:100vh;
}

#header-border-bottom {
  height: 1px;
  background: #202043;
  top: -96px;
}

#top-menu {
  height: 48px;
  background-color: #202042;
  background-image: url(images/logo-small.png);
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

#top-menu div a:hover {
	text-decoration:underline;
}

#landing {
  height: calc(100% - 96px);
  margin-bottom: 96px;
  overflow:hidden;
}

#landing > div { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
}

#lang-switch {
    position: absolute;
    top: 54px;
    right: 6px;
    z-index: 2;
}

#lang-switch a {
    display: inline-block;
    background: #202042;
    color: #ececec;
    font-size: 16px;
    font-weight: 500;
    margin: 0px 1px;
    line-height: 14px;
    padding: 12px 10px;
}

#lang-switch a:hover {
    background: #ececec;
    color: #202042;
}

.social-links {
    position: absolute;
    top: 54px;
    right: 92px;
    z-index: 2;
    background-color: #0077b5;
    height: 38px;
}

.social-link {
    display: block;
    width: 38px;
    height: 38px;
}

.big-logo {
  opacity: 0.9;
  width: 75vw;
  position:absolute;
  z-index:9;
  top: 30%;
}

#content #tab-menu {
  height:96px;
  background:#ECECEC;
  position:absolute;
  top:-96px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;  
}

#content p {
  text-align: justify;
  margin-top: 24px;
}

#content p:first-child {
  margin-top: 0 !important;
}

.tabs {
  min-height:30vh;
  color:#202042;
}

#tab2,#tab3 {
  display:none;
}

#content {
  border-top: 1px solid #202042;
  border-bottom: 1px solid #202042;
}

#tab3 li {
  margin-bottom:24px;
}

/* CASE STUDY SECTION: mostly in media queries */

#case-study {
  flex-direction:row-reverse;
  flex-wrap:wrap;
  justify-content: space-between;
  background-size: cover;  
}

/* CONTACT */

#contact, #news {
  background: #ececec;
  border-top: 1px solid #202042;
}

#news {
  min-height: 30vh;
}

#news-left, #news-right {
  display:block;
}

#contact-info {
    background: #878787;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
}

#contact-info > div:first-child {
    background: url(images/logo_blu.svg) center no-repeat;
    height: 165px;
    width: 200px;
    background-size: contain;  
    margin: 0 auto;
}

#contact-info div+div {
    margin-bottom: 48px;
}

#contact-info p {
  color:#202042;
  font-size: 14px;
  line-height: 24px;
}

/* NEWS */

#news-left, #news-right {
    overflow-y:auto;
}

#nc2 {
    color: #ececec;
    background-color: #202042;
}

.news-wrapper, #nc2.news-container {
    padding: 48px 48px 48px 48px;
}

.news-wrapper, .news-2-wrapper + .news-2-wrapper {
    margin-top: 24px;
}

.news-container {
    color: #202042;
}

.news-container h2 {
    font-size: 24px;
    line-height: 100%;
    font-weight: 300;
    margin: 0;
    text-transform: uppercase;   
}

#nc2.news-container h2 {
    padding-bottom:1em;
    text-align: center;
}

#news-left li, #news-right li {
  margin-left:24px;
}

p.news-date {
    font-size: 10px;
    line-height: 14px;
    border-top: 1px solid;
    text-align: right;
    padding-bottom: 24px;
}

#nc2.news-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.column {
    margin-bottom: 40px;    
}

.column svg.icon {
    margin: 0 auto;
    width: 160px;
    display: block;
    margin-bottom: 24px;
}

.inline-icon {
    position:relative;
    display: inline-block;
}

.inline-icon svg {
    height: 3em;
    position: absolute;
    right: -3.5em;
    width: 3em;
    top: -1.75em;
}

img.news-image {
    max-width: 480px;
    padding-bottom: 24px;
    margin: 0 auto;
    display: block;
    width: 100%;
}

.news-wrapper p {
    clear: both;
}

#nc2 a {
    color: #ececec;
}

#nc2 a:hover {
    text-decoration: underline;
}

/* CONTACT */

#contact-info div {
    text-align: center;
    width: 100%
}


/* FOOTER */
footer {
  min-height: 36px;
  background: #202042;
  color: #ececec;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-align: center;
  padding-top: 12px;
  line-height: 24px;  
}

footer a {
  color:#ececec;
}