/*Made by: Isabelle Anno, 6/7/2022
Updated by: bt3, 1/23/23, changed home image to cgs-008.jpg

    CSS Table of Contents:
1.) Universal site styles & utility classes
2.) Header, footer and nav styles
3.) Images on all pages
4.) Home page styles only 
5.) Our Process page styles only
6.) Contact Us page styles only
Lastly: Media queries for page responsiveness on mobile devices.
*/

/*---------------------------------------------1.) Universal Site Styles ---------------------------------------------------*/

/**/
.test-border{
    border: 1px solid black;
}

*{
    box-sizing: border-box;
}
body,html{
    background-color: white;
}
/*Defining CSS Variables for colors and fonts throughout the page using :root. To change a color or a font,
 modify it in the :root selector below and it will change throughout the entire site. Note that below there
 are also utility classes that share the same name as each variable defined inside :root.
*/
:root {
  --banner-color: #1c90d8;
  --footer-color: #BBC5D3;
  --button-color: #3A3AB9;
  --text-color: #3b3b3b;
  --g1:#F2F2F2;
  --g2: #D9D9D9;
  --g3:#BFBFBF;
  --heading-font: font-family: 'Open Sans', sans-serif;
  --info-font: font-family: 'Poppins', sans-serif;
}

/*Utility Classes*/

/*Based off :root*/
.banner-color{
    background-color: var(--banner-color);
}
.g1{
    background-color: var(--g1);
}
.g2{
    background-color: var(--g2);
}
.g3{
  background-color: var(--g3);
}
.button-bg-color{
    background-color: var(--button-color);
}

.button-color{
    color: var(--button-color)
}
/*General*/
.list-none{
    list-style-type: none;
}

/*Font styles*/
h1,h2,h3,h4,h5,h6{
    font-family: var(--heading-font);
    color: var(--text-color)
}
p,a, li{
    font-family: var(--info-font);
     color: var(--text-color)

}


/*---------------------------------------2.) Header, footer, nav styles--------------------------------------------------------*/

/*Navigation Styles below*/
#desktop-nav ul li{
    list-style-type: none;
}
.desktop-nav a{
    color: var(--button-color);
}
a.currentPage{
    background-color: var(--button-color);
    color: white;
}

#mobile-header{
    display: none;
}
/*Footer Styles below */
footer{
    background-color: var(--footer-color);
}

/*-----------------------------------------------3.) Images----------------------------------------------------------*/

/*Logo*/
img[src="/images/epmlogo1.png"]{
    width: 30vw;
}
/*Hero image on home page*/
img[src="/images/cgs-008.jpg"] {
    width: 100%;
    height: 80vh;
}
img[src="/images/contact-hero.jpeg"]{
    width: 100%;
    height: 60vh;
}
img.img-fluid.product-img{
    width: 97%;
}
img[src="/images/newspaper.jpg"]{
    width: 100%;
}
img[src="/images/process.png"]{
    display: block;
    width: 100%;
    height: 36vh;
}
img[src="/images/30.4.png"], img[src="/images/trophy.png"], img[src="/images/30.42.png"]{
    width: 24vh;
    height: 24vh;
}
/*-----------Remove the CSS rule below when the actual PDF is replacing this image. ;) */
img[src="/images/pdf-sample-img.png"]{
    width: 100%;
    
}


/*-----------------------------------------------4.) Home Page----------------------------------------------------------*/

.home-cards{
display: flex;
flex-direction: column;

  margin: 1vh 0 1vh 0;
  border-radius: 0;
  width: 100%;

  padding: 2vh;
}
/*-----------------------------------------------5.) Our Process ----------------------------------------------------------*/
#step1{
    border: 2px solid #e9ebee;
    text-align: center;
}
#step1 > h3{
color:#1ab2a8;

}
#step1 > p{
color:#bec2cb;
}

#step2{
    border: 2px solid #bec2cb;
    text-align: center;
}
#step2 > h3{
color:#42a5f5;

}
#step2 > p{
color:#939aa9;
}

#step3{
    border: 2px solid #939aa9;
    text-align: center;
}
#step3 > h3{
color:#006ec5;

}
#step3 > p{
color:#939aa9;
}

#step4{
    border: 2px solid #5a6275;
    text-align: center;
}
#step4 > h3{
color:#596aca;

}
#step4 > p{
color:#5a6275;
}

/*-----------------------------------------------5.) Contact Us----------------------------------------------------------*/

div.contact-ul{
    background-color: white;
    border-radius: 3px;
}

/* Card flip animation code below. This code is not completely my own- I modified it to look good on my website,
but it was inspired by this website here: https://www.nicesnippets.com/snippet/bootstrap-4-user-card-design-with-flip-animation*/
.card-body {
  padding: 0 !important;
}
.card-body img {
  height: 110px !important;
}
.flip-div {
  cursor: pointer;
}
.flip-div:hover .back,
.flip-div.hover .back {
  transform: rotateY(0deg);
}
.flip-div:hover .front,
.flip-div.hover .front {
  transform: rotateY(180deg);
}
.flip-main {
  transition: 1s;
  transform: perspective(1000px);
  transform-style: preserve-3d;
  position: relative;
}
.front {
  position: relative;
  transform: rotateY(0deg);
}
.back {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  transform: rotateY(-180deg);
}
.front,
.back {
      width: 30vh;
  backface-visibility: hidden;
  transition: 1s;
  transform-style: preserve-3d;
}

/*-------------------------------------------------Media Queries-----------------------------------------------------*/

/*Defining sections of the page that will display or disappear using the media queries below. */

/*Header and footer*/
#mobile-footer{
    display: none;
}
#home-banner{
    display: flex;
}
#contact-banner{
    display: flex;
}
/*Home page*/
#home-row-1{
    display: flex;
}
/*Process Page*/
#mobile-steps{
    display: none;
}
/*News Page*/
#news-side1, #news-side2{
    display: block;
}
#desktop-news{
    display: block;
}
#mobile-news{
    display: none;
}
/*CRM home page*/
#crm-top-row{
    display: flex;
}
#crm-mid-row{
    display: flex;
}
#crm-bottom-row{
    display: flex;
}
/*Begin media queries*/

@media only screen and (max-width: 1150px) {
    img[src="/images/cgs-008.jpg"] {
        height: 60vh;
    }
    .home-cards {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80%;
    }
}

/*This one is huge and does stuff for all pages, because this is when the mobile nav bar pops up.*/
@media  only screen and (max-width: 990px) {

/*Header and footer*/
    img[src="/images/epmlogo1.png"]{
        width: 35vw;
    }
    #desktop-header{
        display: none;
    }
    #mobile-header{
        display: block;
    }
    #contact-banner{
        display: none;
    }
    footer#desktop-footer{
        display: none;
    }
    #mobile-footer{
        display: block;
    }
/*Home page*/ 
    img[src="/images/cgs-008.jpg"] {
        height: 50vh;
    }
    #home-row-1{
        display: block;
    }
/*Process page*/
    img[src="/images/process.png"]{
        display: none;
    }
    #mobile-steps{
        display: block;
    }
/*News page*/
    #news-side1, #news-side2{
        display: none;
    }
    #desktop-news{
        display: none;
    }
    #mobile-news{
        display: block;
    }
}
@media  only screen and (max-width: 750px) {
    img[src="/images/cgs-008.jpg"] {
        height: 40vh;
    }
    img[src="/images/epmlogo1.png"]{
        width: 50vw;
    }
}
@media  only screen and (max-width: 625px) {
    img[src="/images/cgs-008.jpg"] {
        height: 30vh;
    }
    img[src="/images/epmlogo1.png"]{
        width: 60vw;
    }
    div #home-banner{
        display: none;
    }
}