@font-face {
    font-family: 'Graphik';
    src: url('fonts/Graphik-Regular.eot');
    src: url('fonts/Graphik-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Graphik-Regular.woff2') format('woff2'),
        url('fonts/Graphik-Regular.woff') format('woff'),
        url('fonts/Graphik-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, html {padding: 0; margin: 0; text-align: center; background: #FFF;}

.grey {background-color: #eaeaea;}
section {clear: both; float: left; width: 100%; text-align: center; position: relative; height: 100vh; padding-top: 90px; padding-bottom: 90px;}
#smartlab-1 {padding: 0; background-image: url(images/smartlab-1.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat;} 
#smartlab-2 {background-image: url(images/smartlab-2.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat;}
#smartlab-3 {background-image: url(images/smartlab-3.jpg); background-size: cover; background-position: center bottom; background-repeat: no-repeat;} 
h1 {font-family: 'Graphik'; font-weight: 100; color: #141414; letter-spacing: -0.05em; font-size: 36px;}

#smartlab-3 h1 {margin-top: 40px;}

#smartlab-4 {background-image: url(images/smartlab-4.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat;} 
#smartlab-5 {display: table;}
.valign {display: table-cell; vertical-align: middle;}
.valign h1 {font-size:46px;}



@media (max-width: 768px) {
    #smartlab-1 {margin-top: -20px; background-image: url(images/smartlab-1m.jpg) !important; background-size: 100% !important; }
    #smartlab-2 {background-image: url(images/smartlab-2m.jpg) !important; background-size: 100% !important;}
    #smartlab-3 {background-image: url(images/smartlab-3m.jpg) !important; background-size: 100% !important;}
    #smartlab-4 {background-image: url(images/smartlab-4m.jpg) !important;}
    #smartlab-3 h1 {padding-left: 20px; padding-right: 20px; font-size: 40px; line-height: 1.4em;}
    #smartlab-5 h1 {font-size: 30px; padding: 0 20px;}
}

/* ipad portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    #smartlab-1, #smartlab-2, #smartlab-4 {min-height: 1500px;}
    #smartlab-3 {min-height: 1100px;}
 }

/* ipad pro Portrait */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait) {
    #smartlab-1, #smartlab-2, #smartlab-4 {min-height: 1900px;}
    #smartlab-3 {min-height: 1500px;}
    #smartlab-3 h1 {font-size: 60px !important;}
    #smartlab-1 {margin-top: -20px; background-image: url(images/smartlab-1m.jpg) !important; background-size: 100% !important; }
    #smartlab-2 {background-image: url(images/smartlab-2m.jpg) !important; background-size: 100% !important;}
    #smartlab-3 {background-image: url(images/smartlab-3m.jpg) !important; background-size: 100% !important;}
    #smartlab-4 {background-image: url(images/smartlab-4m.jpg) !important;}
    #smartlab-3 h1 {padding-left: 20px; padding-right: 20px; font-size: 40px; line-height: 1.4em;}
    #smartlab-5 h1 {font-size: 58px; padding: 0 20px;}
    
  }