* {box-sizing: border-box}

body, html  {
    padding: 0; margin: 0; font-size:12pt;
    font-family: 'Roboto', sans-serif;
}


/* body gradient */
body {
    padding:1em 10%;
    background: white;
    height:100%;
}

a       {color:darkslategray}
a:hover {color:#ff4443}

h1 {
    font-size: 48px;
}

#sapesco-logo {
    width:308px;
    height:94px;
    background:url('/static/i/logos/sapesco.jpg') no-repeat left center;
    background-size: cover;
}

#bottom-logos {
    overflow: hidden;
    margin-bottom:2rem;
}

#sahara-logo {
    float:left;
    width:200px;
    height:113px;
    background:url('/static/i/logos/saharainstitute-s.png') no-repeat center center;
    background-size: cover;
    margin-right:4rem;
}

#espaces-logo {
    float:left;
    width:300px;
    height:76px;
    background:url('/static/i/logos/espace-s.png') no-repeat center center;
    background-size: cover;
    margin-right:4rem;
    margin-top:24px;
}

.insta {
    width:100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    overflow:hidden;
}

.insta > a {
    width:32%;
    min-width:300px;
    height:320px;
    float:left;
    margin-right:1%;
    margin-bottom:1rem;
    border:1px solid silver;
    background-size:cover ;
    font-size: 120%;

    -webkit-transform: perspective(4px) translateZ(0);
    transform: perspective(4px) translateZ(0);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}
.insta > a:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #ED2F31;
    height: 8px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.insta > a:hover:before {
    right:0;
}


/*
.insta > div > div:nth-child(3){
    margin-right:0
}
 */

.insta label {
    background: #ED2F31;
    color:white;
    padding:0.5rem 1.8rem;
    display: block;
    float: left;
    min-width: 180px;
    /*margin-left:-0.5rem*/
}

.thumb {

}

.location { background:url('/static/i/previews/location-01.jpg') no-repeat center center;}
.wellhead { background:url('/static/i/previews/wellhead.jpg') no-repeat center center;}
.pu160 {    background:url('/static/i/previews/pu160n.jpg') no-repeat center center;}
.ht {       background:url('/static/i/previews/ht.jpg') no-repeat center center;}
.tank {       background:url('/static/i/previews/tank.jpg') no-repeat center center;}
.model {       background:url('/static/i/previews/model.jpg') no-repeat center center;}
.moon {       background:url('/static/i/previews/moon.jpg') no-repeat center center;}
.bluemoon {       background:url('/static/i/previews/bluemoon.jpg') no-repeat center center;}
.oceandemo {       background:url('/static/i/previews/ocean.jpg') no-repeat center center;}
.whiteroom {       background:url('/static/i/previews/whiteroom.jpg') no-repeat center center;}

.hl {
    width:100%; background: #ED2F31;
    color:white;
    font-weight: bold;
    font-size: 18px;
    padding:8px 1rem;
}

h2  {margin:2rem 0 0.4rem 0}