:root {
    --silver: #eaeaea;
    --lightgray: #aaa;
    --gray: #999;
    --charcoal: #505050;
    --darkgray: #333;
    --blue: #1464b4;
    --lightblue: rgb(80,160,255);
    --midnight: #111622;
    --navy: #003c78;
    --green: #080;
    --darkgreen: #060;
    --red: rgb(180,0,0);
    --darkred: #900;
    --gold: rgb(250,180,0);
  }
*{
    position: relative;
    box-sizing: border-box;
}
body{
    margin: 0px;
    padding: 0px;
    background: linear-gradient(to bottom right, var(--midnight), #333844);
    font-family: Inter, Arial;
    font-size: 14px;
}
h1{
    font-size: 18px;
    text-transform: uppercase;
    margin: 8px 0px;
    font-weight: 600;
    padding: 0px;
}
h2{
    font-size: 15px;
    font-weight: 500;
    margin: 0px 0px 8px 0px;
}
a{
    color: var(--blue);
    text-decoration: none;
}
p{
    padding: 8px 0px;
    margin: 0px;
}
.material-symbols-rounded{
    vertical-align: middle;
}
.flex{
    display: flex;
    flex-wrap: wrap;
    margin: 0px -16px;
}
header,
#pillars,
#aboutus,
#principles,
footer{
    padding-left: 32px;
    padding-right: 32px;
}
header,
#aboutus,
#principles,
footer{
    padding-top: 16px;
    padding-bottom: 16px;
}
header{
    z-index: 2;
}
#logo{
    height: 28px;
}
main{
    overflow: hidden;
}
#pillars{
    padding-bottom: 16px;
    display: flex;
    margin: 0px -16px;
    overflow-x: scroll;
    scrollbar-width: none;
}
#pillars::-webkit-scrollbar { 
    display: none;
}
.tileContainer{
    width: 25%;
    padding: 16px;
    height: 420px;
    min-width: 400px;
}
.tile{
    display: block;
    box-shadow: 1px 2px 3px rgba(0,0,0,1);
    height: 100%;
    overflow: hidden;
}
.tile .closePillar{
    display: none;
}
.tile .closePillar i{
    color: white;
    font-size: 18px;
}
.tile.active .closePillar{
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
}
.tileBG,
.tileBG::after{
    background-size:  cover;
    position: absolute;
    width: 100%;
    height: 100%;
}
.tileBG::after{
    content: "";
    opacity: 0;
    transition: .5s;
}
.tileScreen{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: .75s;
    background: black;
}
#tile1 .tileBG{
    background-image: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0)), url('images/ai bw.jpg');
    background-position: 60% 20%;
}
#tile1 .tileBG::after{
    background-image: linear-gradient(to bottom, rgba(0,0,0,.33), rgba(0,0,0,0)), url('images/ai.jpg');
    background-position: 60% 20%;
}
#tile2 .tileBG{
    background-image: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0)), url('images/cloud bw.jpg');
    background-position: 40% 40%;
}
#tile2 .tileBG::after{
    background-image: linear-gradient(to bottom, rgba(0,0,0,.33), rgba(0,0,0,0)), url('images/cloud.jpg');
    background-position: 40% 40%;
}
#tile3 .tileBG{
    background-image: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0)), url('images/software bw.jpg');
    background-position: 50% 50%;
}
#tile3 .tileBG::after{
    background-image: linear-gradient(to bottom, rgba(0,0,0,.33), rgba(0,0,0,0)), url('images/software.jpg');
    background-position: 50% 50%;
}
#tile4 .tileBG{
    background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0)), url('images/analytics bw.jpg');
    background-position: 40% 0%;
}
#tile4 .tileBG::after{
    background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0)), url('images/analytics.jpg');
    background-position: 40% 0%;
}
.tile.active .tileBG::after{
    transform: scale(10);
}
.tileTitle{
    font-size: 14px;
    text-transform: uppercase;
    text-shadow: 0px 0px 5px black;
    font-weight: 500;
    color: white;
    padding: 16px 24px;
}
.tileSubtitle{
    font-size: 18px;
    color: white;
    text-shadow: 0px 0px 5px black;
    font-weight: 500;
    padding: 0px 24px;
}
.learnmore{
    color: white;
    text-shadow: 0px 0px 5px black;
    position: absolute;
    bottom: 16px;
    right: 16px;
    transition: .5s;
}
.learnmore i{
    transition: .5s;
}
.tile:hover .learnmore i,
.tile:focus .learnmore i{
    margin-left: 6px;
}
.tile p{
    color: white;
    font-size: 13px;
    padding: 8px 24px;
    opacity: 0;
    transition: .75s;
    line-height: 1.5;
}
.tile.active .learnmore{
    right: -100%;
}
#scrollers{
    text-align: center;
    padding: 16px;
    top: -16px;
}
#scrollers i{
    color: white;
    opacity: .5;
    transition: .25s;
    font-size: 32px;
}
.tile:hover .tileBG::after,
.tile:focus .tileBG::after,
.tile.mobile .tileBG::after,
.tile.active .tileBG::after,
.tile.active .tileScreen,
.tile.active p,
#scrollers a:hover i,
#scrollers a:focus i{
    opacity: 1;
}
#aboutus{
    background: white;
    border-top: 1px solid var(--silver);
    border-bottom: 1px solid var(--silver);
}
#principles{
    background: #f6f6f8;
}
#principles .flex > div{
    padding: 12px 16px;
    width: 50%;
}
.principle{
    padding: 16px;
    background: white;
    border: 1px solid var(--silver);
    border-radius: 4px;
    box-shadow: 1px 2px 3px rgba(0,0,0,.15);
    height: 100%;
    color: var(--midnight);
}
.principle i{
    float: left;
    font-size: 48px;
    color: var(--blue);
}
.principle > div{
    margin-left: 64px;
}
footer{
    background: var(--navy);
    color: white;
}
footer a{
    color: white;
    text-decoration: underline;
}
@media screen and (max-width: 900px){
    #principles .flex > div{
        width: 100%;
    }
    .tileBG::after{
        opacity: 1;
    }
}
@media screen and (max-width: 600px){
    header,
    #pillars,
    #aboutus,
    #principles,
    footer{
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .tileContainer{
        width: 100%;
        min-width: 100%;
    }
}