﻿.page-home
{
    width:100%;            
}


.page-home .splash {
    /*
    background-image: url(images/hp_1.jpg);
    background-repeat:no-repeat;
    background-position:center bottom;
        background-size:cover;
        */
    overflow:hidden;
    width: 100%;
    max-width: 2560px;
    margin: 0 auto;
    clear: both;
    margin-bottom: 0.4%;
    display:table;
    position:relative;
}
.splashVideo
{
    width:100%;
    height:45vw;
    float:left;
}
.splashVideo img
{
    width:100%;
}

.splashVideo video
{
    float:left;
    width:100%;
}
.splashPatt { 
    background-image: url(images/bg_pattern.png); 
    position:absolute; 
    opacity: 0.2; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 9;
}
.splashText {
    position:absolute;z-index:10;bottom:3vw;
    text-align: center;
    clear: both;
    width:100%;text-align:center;
}
.splashText h1 {
    
    text-align: center;
    clear: both;
    font-weight:normal;
    letter-spacing:-1.1px;
    font-size:37px;color:#fff;
    line-height:35px;

}
.splashText p {
    clear: both;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  line-height: 19px;
  max-width: 500px;
  margin: auto;
}

.page-home .promos {
    width:100%;
    max-width: 2560px;
    margin: 0 auto;
}

.col {
    width: 24.7%;
    display: block;
    float: left;
    background-color: #fff;
    text-align: center;
    overflow: hidden;
    color: white;
    height:auto;
    margin: 0% 0.4% 0% 0%;
    background-repeat: no-repeat;
    background-size: cover;
}
.col:nth-child(4) {
    margin: 0% 0% 0% 0%;
}


/* HP BRICKS*/
.hp-brick {overflow:hidden;position:relative;}
.hp-brick:hover .hp-brick-title{opacity:1;}
.hp-brick:hover .hp-brick-img {
    transform:scale(1.05);
}        
.hp-brick-title
{
    transition: all ease 0.5s;
    opacity:0;
    color:white;
    position:absolute;bottom:0px;right:0px;
    text-align:center;
    background: rgba(0, 0, 0, .4);
    width:100%;
    padding:20px 0px 20px 0px;   
    line-height:17px;
}
.hp-brick-title span
{
    font-size:18px;
}
.hp-brick-img {
    width:100%;
    transform:scale(1);
    transition: all ease 0.5s;
    backface-visibility:hidden;
}




.promo1 {
}
.promo2 {
}
.promo3 {
}
.promo4 {
}




@media only screen and (max-width: 1200px) {
    .col {
        width: 49.8%;
        margin: 0% 0.4% 0.4% 0%;
        background-size: cover;
    }
    .col:nth-child(2) {
        margin: 0% 0% 0% 0%;
    }
    .hp-brick-title
    {
        opacity:1;
    }
    .hp-brick-title span
    {
        font-size:18px;
    }
}
@media only screen and (max-width: 700px) {
    .page-home .splash {
        width: 100%;
        margin: 0 auto;
        clear: both;
        margin-bottom: 0.4%;
    }
    .splashPatt { 
        display:none;
    }
    .splashVideo
    {
        overflow:hidden;
        height:auto;
    }
    .splashVideo img
    {
        width:100%;
    }
    .splashText {
        position:relative;
        text-align: center;
        clear: both;
        width:100%;text-align:center;
        padding-top:8vw;
    }
    .splashText h1 {
    
        text-align: center;
        clear: both;
        font-weight:normal;
        letter-spacing:-1.1px;
        font-size:30px;color:#5b5b5b;
        line-height:35px;

    }
    .splashText p {
        clear: both;
        color:#5b5b5b;
        text-align:center;
        font-weight:normal;

          font-size: 17px;
          line-height: 22px;
          margin: 0px 4% 25px 4%;


    }
    .col {
        width: 50%;
        margin: 0% 0% 0% 0%;
        background-size:cover;
    }
    .col:nth-child(2) {
        margin: 0% 0% 0% 0%;
    }
    .hp-brick-title
    {
      opacity: 1;
      color: white;
      bottom: 0px;
      right: 0px;
      text-align: center;
      background: rgba(0, 0, 0, .4);
      width: 100%;
      font-size: 10px;
      padding: 7px 0px 7px 0px;
    }
    .hp-brick-title span
    {
        font-size:14px;
    }
}



















.page-home .promos ul {
    margin: 0;
    position: relative;
    z-index: 1;
}
.page-home .promos li {
    list-style: none;
    position: relative;
    z-index: 1;
    min-height: 2px;
    margin: 0;
    padding: 0;
    float: left;
    width: 25%;
    background-color:red;
}
.promo {
    background-image: url("http://images.apple.com/v/home/bq/images/promo_world_gallery_large.jpg");
    background-size: 639px 200px;
    width: 639px;
    height: 200px;
}

.hpIntroText 
{
    padding-top:20px;
    margin: 60px 24% 60px 24%;text-align: center;clear:both;
}
.hpIntroText h1 {
    text-align: center;
    font-size:30px;
    clear:both;
    line-height:30px;
}
.hpIntroText p
{
    text-align:center;
    font-size:16px;
    clear:both;
}

.hpLogos
{
    clear:both;
    width:100%;
    text-align:center;
    float:left;
}
.hpLogos img{margin:auto;}

