body{
    font-family: "Google-sans","Roboto",Arial,Helvetica,sans-serif;                
}
.home-background-content
{
    background:url('../images/vmedulife-app.JPG');
    position: relative;
    background-repeat: no-repeat;
    width:100%;
    background-size: 100%;
    /* min-height: 450px; */
}
.modules-section{
    min-height: 200px;
    /* padding: 20px; */
    /* display: flex; */
    background: #efefef;
}
.modules-middle-section{
    /* background: #efefef; */
    /* margin-top: 10px; */
}



#obe {position: relative;height: 150px;width: 150px;border-radius: 100px;top: 180px;left: 170px;background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);color:#ffffff;}
#obe-1 {position: absolute;top: 15px;left: 200px;}
#obe-2 {position: absolute;top: 90px;left: 75px;}
#obe-3 {position: absolute;top: 90px;left: 320px;}
#obe-4 {position: absolute;top: 205px;left: 0px;}
#obe-5 {position: absolute;top: 205px;left: 395px;}
#obe-6 {position: absolute;top: 315px;left: 75px;}
#obe-7 {position: absolute;top: 315px;left: 320px;}
#obe-8 {position: absolute;top: 375px;left: 200px;}

#tnl {position: relative;height: 150px;width: 150px;border-radius: 100px;top: 180px;left: 200px;background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);color:#ffffff;}
#tnl-1 {position: absolute;top: 15px;left: 235px;}
#tnl-2 {position: absolute;top: 90px;left: 110px;}
#tnl-3 {position: absolute;top: 90px;left: 360px;}
#tnl-4 {position: absolute;top: 205px;left: 32px;}
#tnl-5 {position: absolute;top: 205px;left: 430px;}
#tnl-6 {position: absolute;top: 315px;left: 110px;}
#tnl-7 {position: absolute;top: 315px;left: 360px;}
#tnl-8 {position: absolute;top: 375px;left: 235px;}

#erp {position: relative;height: 150px;width: 150px;border-radius: 100px;top: 180px;left: 170px;background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);color:#ffffff;}
#erp-1 {position: absolute;top: 15px;left: 200px;}
#erp-2 {position: absolute;top: 90px; left: 75px}
#erp-3 {position: absolute;top: 90px; left: 320px}
#erp-4 {position: absolute;top: 205px; left: 0px}
#erp-5 {position: absolute;top: 205px;left: 395px;}
#erp-6 {position: absolute;top: 315px;left: 75px;}
#erp-7 {position: absolute;top: 315px;left: 320px;}
#erp-8 {position: absolute;top: 375px;left: 200px;}


.modules-title-section{
    display: flex;
    justify-content: center;
    min-height: 350px;
    align-items: center;
}
.modules-title{
    font-size: 32px;
    font-weight: 700;
    color: #fffefe;
    text-align: left;
}

.module-content-section{
    /* display: flex;
    justify-content: center; */
}

.modules-card-link{
    color: inherit;
}


.modules-card {
    /* Add shadows to create the "card" effect */
    box-shadow: -1px 3px 3px 1px rgba(0,0,0,0.4);
    transition: 0.3s;
    width: 110px;
    height: 110px;
    border-radius: 60px;
    flex-direction: row;
    display: flex;
    float: left;
    margin: 5px;
    background: #ffffff;
}
  
/* On mouse-over, add a deeper shadow */
.modules-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
	transform: rotate(360deg);
}
    
.module-card-container {
    padding: 5px 0px;
    flex: 1;
}
.module-icon{
    font-size: 25px;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.module-text{
    font-size: 14px;
    padding: 3px 3px;
    text-align: center;
}

.stats-parent-container{
    background-color: rgba(224, 220, 253, 0.7);
    position: relative;
    top: 20px;
    left: 0;
    width: 100%;
    min-height: 100px;
}

.stats-container{
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.stats-right-border{
    border-right: 3px solid rgb(230, 230, 230);
}
.stats-icon-container{
    flex: 1;
    align-self: center;
    margin-right: 15px;
}
.stats-content-container{
    flex: 9;
    align-self: center;
}
.stats-icon{
    font-size: 25px;
}
.stats-count{
    font-size:35px;
    font-weight: 700;
}
.stats-text{
    font-size:19px;
}

.obe-div{
    /* clip-path: circle(78.6% at 20% 50%); */
    clip-path: polygon(0 0, 100% 0, 71.5% 100%, 0% 100%);

    border-radius: 5px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
    height: 500px;
}
.teaching-div{
    /* clip-path: circle(78.6% at 85% 50%); */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 28.5% 100%);
    border-radius: 5px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
    height: 500px;
}

.flip-card-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.flip-card-container>* {
    flex: 1 1 200px;
}


.flip-card {
    background-color: transparent;
    width: 150px;
    height: 150px;
    border: 0.1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front-grey, .flip-card-back-blue, .flip-card-front-blue, .flip-card-back-grey {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front-grey {
    background-color: #e8e8e8;
    color: black;
    display: flex;
    justify-content: center;   
    align-items: center;
  }
  
  /* Style the back side */
  .flip-card-back-blue {
    background-color: #015cb5;
    color: white;
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;   
    align-items: center;
  }
  
    .flip-card-front-blue {
    background-color: #015cb5;
    color: white;
    display: flex;
    justify-content: center;   
    align-items: center;
  }
  
  /* Style the back side */
  .flip-card-back-grey {
    background-color: #e8e8e8;
    color: black;
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;   
    align-items: center;
  }
  
	.label-homescreen{
		background-color: #303f9f;
		color: #FFFFFF;
		font-size: 18px;
		border: 1px solid #FFFFFF;
	}

@media screen and (max-width:1050px){

    .modules-section{
        position: relative;
        /* min-height: 725px; */
        display: flex;
        flex-direction: column;
    }
    .modules-title-section{

        min-height: 150px;
        /* order:1; */
    }
    .modules-middle-section{
        display:flex;
        /* background: #efefef; */
        /* justify-content: center; */
        flex-direction: column;
        position: relative;
        /* min-height: 725px; */
    }
    .modules-title.modules-title{
        flex:auto;
    }

    
    .obe-div{
        clip-path: unset;
        background: #1e5799; /* Old browsers */
        background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
        max-height:200px;
        width: 100% !important;
    }
    .teaching-div{
        clip-path: unset;
        background: #1e5799; /* Old browsers */
        background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
        max-height:200px;
        width: 100% !important;
    }

    .dummy-card{
        display:none;
    }
    
    .modules-circle-section{
        margin: 10px;
        width: 100% !important;
    }
		

    #obe {position: unset;display: none;}
    #obe-1 {position: unset;}
    #obe-2 {position: unset;}
    #obe-3 {position: unset;}
    #obe-4 {position: unset;}
    #obe-5 {position: unset;}
    #obe-6 {position: unset;}
    #obe-7 {position: unset;}
    #obe-8 {position: unset;}

    
    #tnl {position: unset;display: none;}
    #tnl-1 {position: unset;}
    #tnl-2 {position: unset;}
    #tnl-3 {position: unset;}
    #tnl-4 {position: unset;}
    #tnl-5 {position: unset;}
    #tnl-6 {position: unset;}
    #tnl-7 {position: unset;}
    #tnl-8 {position: unset;}

    #erp {position: unset;display:none;}
    #erp-1 {position: unset;}
    #erp-2 {position: unset;}
    #erp-3 {position: unset;}
    #erp-4 {position: unset;}
    #erp-5 {position: unset;}
    #erp-6 {position: unset;}
    #erp-7 {position: unset;}
    #erp-8 {position: unset;}

}