/* Reset default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Body styles */

.flex-container {
    display: flex;
    justify-content:center;
}

.nested-columns {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width:100%;
}

.flip {
    flex-wrap:wrap-reverse;
}

.column {
    flex:1;
    flex-direction: column;
    /*background-color: #fafafa;    */
}

.col-left, .col-right {
    flex-direction: column;
    background-repeat: no-repeat;
    /*
    background-size: calc(50vw - 0px);
    */
    background-size: cover;
    min-height: 100%;
}

.col-left {
    background-position: top left;
}

.col-right {
    background-position: top right;
}

.col-left > .readable {
    margin:60px 40px 80px 0px;
    padding-left:calc(50vw - 620px);
    padding-left:120px;
}

.col-right > .readable {
    margin:60px 0 80px 40px;
    padding-right:calc(50vw - 620px);
    padding-right:120px;
}
/*
.readable {
    margin:60px 0 80px;
    padding-left:60px;
    padding-right:60px;
}
*/
.readable > p {
    margin-bottom:20px;
}

    .preach, .preach2 {
        font-style: italic;
        font-size: 0.8rem; 
        color:#666; 
        margin-top:1rem;
    }
    .preach2 {
        font-size: 1rem; 
    }
    
    .hr {
        border-bottom: 1px lightgray;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
    }

.fauxh1 {
    font-family: serif;
    font-size:2.4em;
    font-weight:600;
}

.mobile-mini-hero {
    height:100px;
}

.bg-img-audi {
    background-image: url(./img/audi-1200.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

.bg-img-hm {
    background-image: url(./img/hm-bikini-1.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

.bg-img-wells {
    /*
    background-image: url(./img/2-case-wells-ai.jpg);
    */
    background-image: url(./img/wells-fargo-branch.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

.bg-img-aep {
    background-image: url(./img/4-case-app-aep-square-1000.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

.services {
    max-width:1000px;
}

.welcome-home {
    max-width:700px;
}

.service, .welcome {
    /*background:#fff; */
    padding:20px; 
    font-size:1em;
    /*text-align:center;*/ 
}

.service > p {
    margin-bottom: 20px;
}

.service > p > img, .service > p > a > img  {
    max-height:60px;
}

.welcome {
    align-items: center;
    align-self: center;
}

.welcome.left{
    width:40%;
}

.welcome.right{
    width:60%;
}

.welcome > p > img {
    max-width: 100%;
}

.ffffff {
    background-color: #ffffff;
}
.efefef {
    background-color: #efefef;
}
.fafafa {
    background-color: #fafafa;
}

.loki {
    font-size:.8em;
    padding:15px 0 30px 0;
    border-top: 2px solid cornflowerblue ; /*  #0c9fda ;    /* #00a0dc ; */
}



.hero-logos {
    max-height:100px; 
    margin:20px;
}

/*

COLLAPSIBLE DIVS

*/


.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

/*

end COLLAPSIBLE DIVS

*/

/*

PORTFOLIO LINKS

* /

#coca-cola {
    background-color: white;
}
#coca-cola:hover {
    background-color: #fefefe;
}

/*

END PORTFOLIO LINKS

*/

/*
override
*/

/* Media query for smaller screens */
@media screen and (max-width: 767px) {
    
    .hero-logos {
        max-height:50px; 
        margin:20px;
    }

    .col-left > .readable {
        margin:60px 0px 40px 0px;
        padding-left:calc(50vw - 620px);
        padding-left:0px;
    }
    
    .col-right > .readable {
        margin:60px 0 40px 0px;
        padding-right:calc(50vw - 620px);
        padding-right:0px;
    }
    
    .fauxh1 {
        font-family: serif;
        font-size:1.9em;
        font-weight:600;
    }
    
    .bluecap {
        /*border-top: solid 2px cornflowerblue ; /*  #0c9fda ;    /* #00a0dc ; 
        margin-top:30px;*/
    }
    
    .services > div {
        flex-direction: column;
    }
    
    .mobile-column {
        flex-direction: column;
    }
    
}