@charset "utf-8";

html {
	box-sizing: border-box;

}

*,
*::before,
*::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Arial", "Helvetica", 'Helvetica Neue', "sans-serif";
	font-weight: 400;
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header .NavSpace { /* to give space for top navbar*/
        width: 100%;
        background: #989FAC;
        min-height: 75px;
    }












/*EXTRA LARGE MONITOR - START*/

@media screen and (min-width: 2100px){
	.HeroDems {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 700px;
        background-image: url("images/Demonstratives/IpadDems2400x933.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
    .Card-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 50%;
		height: auto;
		margin: 40px auto;
		}

	.Card   {
		width: 100%;
		height: auto;
		display: inline-flex;
		flex-direction: row;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin-bottom:15px;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;
		overflow: hidden;
	}
	.Card:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.Card-content {
		display: flex;
		flex-direction: column;
		flex: 0 1 70%;
		border-left: 2px solid #DEDEE0;
		margin: 25px;
	}
	.linktext {
		text-decoration: none;
	}
	.linktext h3 {
		color:#014F77;
		font-weight: 600;
		font-size: 2rem;
		padding: 25px 20px 0;
		height: auto;
		width: 80%;	
	}
	.linktext p {
		padding: 15px 20px;
		height: auto;
		width: 100%;
		font-size: 1.25em;
		color: black;
	}
	.CardImg {
		display: block;
		flex: 1 1 40%;

	}
	.ThumbImg {
		height: 100%;
		width: 100%;
		object-fit: cover;
		border-radius: 8px 0 0 8px;
	}
}   
/*EXTRA LARGE MONITOR - END */















/*LARGE MONITOR SIZE - START*/
@media screen and (min-width: 1622px) and (max-width: 2099px){
	.HeroDems {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 700px;
        background-image: url("images/Demonstratives/IpadDems2400x933.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
	.Card-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 70%;
		height: auto;
		margin: 40px auto;
		}

	.Card   {
		width: 100%;
		height: auto;
		display: inline-flex;
		flex-direction: row;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin-bottom:15px;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;
		overflow: hidden;
	}
	.Card:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.Card-content {
		display: flex;
		flex-direction: column;
		flex: 0 1 70%;
		border-left: 2px solid #DEDEE0;
		margin: 25px;
	}
	.linktext {
		text-decoration: none;
	}
	.linktext h3 {
		color:#014F77;
		font-weight: 600;
		font-size: 2rem;
		padding: 25px 20px 0;
		height: auto;
		width: 80%;	
	}
	.linktext p {
		padding: 15px 20px;
		height: auto;
		width: 100%;
		font-size: 1.25em;
		color: black;
	}
	.CardImg {
		display: block;


	}
	.ThumbImg {
		height: 100%;
		width: 100%;
		object-fit: fit;
		border-radius: 8px 0 0 8px;
	}
}
/*LARGE MONITOR SIZE - END*/



















/*DEMONSTRATIVES - START*/
@media screen and (min-width: 1281px) and (max-width: 1280px){
	.HeroDems {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 400px;
        background-image: url("images/Demonstratives/IpadDems1200x467.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
	.Card-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 80%;
		height: auto;
		margin: 40px auto;
		}

	.Card   {
		width: 100%;
		height: auto;
		display: inline-flex;
		flex-direction: row;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin-bottom:15px;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;
		overflow: hidden;
	}
	.Card:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.Card-content {
		display: flex;
		flex-direction: column;
		flex: 0 1 70%;
		border-left: 2px solid #DEDEE0;
		margin: 25px;
	}
	.linktext {
		text-decoration: none;
	}
	.linktext h3 {
		color:#014F77;
		font-weight: 600;
		font-size: 1.75rem;
		padding: 25px 20px 0;
		height: auto;
		width: 80%;	
	}
	.linktext p {
		padding: 15px 20px;
		height: auto;
		width: 80%;
		color: black;
	}
	.CardImg {
		display: block;
		flex: 1 1 auto;
	}
	.ThumbImg {
		height: 100%;
		width: 100%;
		border-radius: 8px 0 0 8px;
		object-fit: cover;
	}
}
/*TABLET/DESKTOP SIZE - END*/






















/*MONITOR SIZE - START*/
@media screen and (min-width: 621px) and (max-width: 1621px) {
	.HeroDems {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 550px;
        background-image: url("images/Demonstratives/IpadDems1200x467.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
	.Card-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 70%;
		height: auto;
		margin: 10px auto;
		}
	
	.Card   {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin-bottom:15px;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;
		overflow: hidden;
	}
	.Card:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.Card-content {
		display: flex;
		flex-flow: row wrap;
	}
	.linktext {
		text-decoration: none;
	}
	.linktext h3 {
		color:#014F77;
		font-weight: 600;
		padding: 5px 10px;
		height: auto;
		width: 100%;
		text-decoration: none;	
	}
	.linktext p {
		padding: 5px 10px;
		height: auto;
		width: 100%;
		color: black;
		text-decoration: none;	
	}
	.CardImg {
		display: block;
	}
	.ThumbImg {
		height: auto;
		width: 100%;
		object-fit: fill;
		border-radius: 8px 8px 0 0;
		flex: 1 1 auto;
	}
}
/*MONITOR SIZE - END*/





















/*MOBILE PORTRAIT VIEW - START*/
@media screen and (max-width : 620px ){
	.HeroDems {/*Hero Image and area*/
        display: flex;
        margin: 100px auto 0;
        width: 100%;
        min-height: 300px;
        background-image: url("images/Demonstratives/IpadDems800x311.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
/*MOBILE SERVICES CARDS - START*/
.Card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 95%;
    height: auto;
    margin: 10px auto;
    }

.Card   {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background-color: #EFEFEF;
    border: 2px solid white;
    margin-bottom:15px;
    border-radius: 10px ;
    transition: transform 0.6xs ease;
    box-shadow: 5px 5px 10px gray;
    overflow: hidden;
}
.Card:hover {
    transform: translateY(-10px);
    background-color: 2px solid #C8C7CB;
    border: 2px solid white;
    box-shadow: 5px 5px 10px gray;
}
.Card-content {
    display: flex;
    flex-flow: row wrap;
}
.linktext {
	text-decoration: none;
}
.linktext h3 {
    color:#014F77;
    font-weight: 600;
    padding: 5px 10px;
    height: auto;
    width: 100%;	
}
.linktext p {
    padding: 5px 10px;
    height: auto;
    width: 100%;
    color: black;
}
.CardImg {
    display: block;
}
.ThumbImg {
    height: 175px;
    width: 100%;
    object-fit: fill;
    border-radius: 8px 8px 0 0;
    flex: 1 1 auto;
}
}
/*MOBILE PORTRAIT VIEW - END*/