@import url('https://fonts.googleapis.com/css?family=Domine:400,700|Oswald:300,400');

html {
    margin:0px;
    padding:0px;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

header{
    z-index: 1;
    position:fixed; 
    background:rgba(0,0,0,0);
    
}

header a{
    color:#4ECDC4;
    background:#556270; 
    display:inline-block; 
    padding:0px 20px; 
    height:60px;
    width:60px;
    line-height:60px; 
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    font-size:2rem;
    font-family: Oswald, sans-serif;
}

#video-background {
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}

.hero-native{
    background-image: url(images/bg-native.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
    background-position:center center;
    width:100%;
    height:600px;
    display:table;
}

.hero-ali{
    background-image: url(images/bg-ali.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
    background-position:center center;
    width:100%;
    height:600px;
    display:table;
}

.hero-ge{
    background-image: url(images/bg-ge.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
    background-position:center center;
    width:100%;
    height:600px;
    display:table;
}


/* Typography */

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.125rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.875rem;
}

p {
  font-size: 1.125rem;
  font-weight: 200;
  line-height: 1.8;
}

.text-sans {
    font-family: Oswald, sans-serif;
}

.text-serif {
    font-family: Domine, serif;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-bold {
  font-weight: 700;
}

.font-blue {
    color:#4ECDC4;
}

.font-white {
    color:#ffffff;
}

.font-dark {
    color:#556270;
}

.font-black {
    color:#222222;
}

.tracking {
    letter-spacing: 0.3rem;
}

.font-height {
    line-height: 1.75rem;
}

/* Home page */

.hero-background {
    background-color: rgba(85, 98, 112, 0.8);
    width:100%;
    height:700px;
    position: relative;
    display: table;
}

.hero-transparency {
    background-color: rgba(85, 98, 112, 0.8);
}

.hero-center {
    display: table-cell;
    vertical-align: middle;
}

.gradient {
    background: #86c1e8; /* Old browsers */
    background: -moz-linear-gradient(left, #86c1e8 0%, #4ecdc4 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #86c1e8 0%,#4ecdc4 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #86c1e8 0%,#4ecdc4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86c1e8', endColorstr='#4ecdc4',GradientType=1 ); /* IE6-9 */
}

.divider {
    background: #86c1e8; /* Old browsers */
    background: -moz-linear-gradient(left, #86c1e8 0%, #4ecdc4 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #86c1e8 0%,#4ecdc4 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #86c1e8 0%,#4ecdc4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86c1e8', endColorstr='#4ecdc4',GradientType=1 ); /* IE6-9 */
    width:100%;
    height:60px;
    position: relative;
    display: table;
}

.divider-text {
    font-family: Oswald, sans-serif;
    color:#556270;
    line-height: 1.5rem;
    font-weight: 400;
    font-size: 1.375rem; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
}

.client {
    width:100%;
    height:400px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.image-effect {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.ali-home {
    background-image: url(images/ali-small.jpg);
    background-position: center;
}

.native-home {
    background-image: url(images/native-small.jpg);
    background-position: center;
}

.ge-home {
    background-image: url(images/ge-small.jpg);
    background-position: center;
}

.client:hover .image-effect, .client:focus .image-effect {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.client-link{
    display: block;
    font-size: 3.5rem;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    text-decoration: none;
}

.client a span{
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
}

.logo-container{
    background-color:#ffffff;
    padding-top:50px;
    height:170px;
}

.logo-a{
    text-align:center;
}

.logo-mf{
    text-align:center;
    padding-top:10px;
}

.logo-ss{
    text-align:center;
    padding-top:0px;
    margin:0px;
}

.logo-cs{
    text-align:center;
}

a{
    text-decoration: none;
    color: #ffffff;
}


/* Footer */
.footer{
    background-color: #556270;
    height: 300px;
    width: 100%;
}

.footer-text{
    text-align: center;
    font-family: Oswald, sans-serif;
    color:#ffffff;
    line-height: 1.5rem;
    font-weight: 400;
    font-size: 1.375rem;
    letter-spacing: 0.1rem;
    display: table;
}

.footer-center{
    display: table-cell;
    vertical-align: middle;
    margin:0 auto;
}

.footer-container{
    width:600px;
}

.button-green{
    margin: 0 auto;
    padding: 20px;
    border: 3px solid #86C1E9;
    width:200px;
}

.button-blue{
    margin: 0 auto;
    padding: 20px;
    border: 3px solid #4ECDC4;
    width:200px;
}

.center-parent {
    display: table;
}

.center-child{
    display: table-cell;
    margin: 0 auto;
    width:30%;
}

@media (max-width: 719px) { 
    
    .logo-container {
        margin-top:0px;
        height:420px;
    }
    
    .logo-a{
        text-align:center;
        padding-top:40px;
    }
    
    .logo-mf{
        text-align:center;
        padding-top:30px;
    }

    .logo-ss{
        text-align:center;
        padding-top:30px;
    }

    .logo-cs{
        text-align:center;
        padding-top:30px;
    }
    
    .footer-container {
        width:100%;
  }
}