@import url('https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css');

/* Import Roboto and Roboto-slab from Google Fonts - Short URL (http://srt.lt/b4tY7) */
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:700|Roboto:300');

/* Import Font Awesome - Short URL (http://srt.lt/p2b4) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

*,
*::before,
*::after {
	box-sizing: border-box; /* Put padding on the inside of elements */
}
 

body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px; /* Our base font-size */
	line-height: 1.75; /* Line height assumes an almost rem value but is dynamic to the font-size */
	font-weight: 300; /* Use the included weight */
	color: #332F21; /* Don't use black it's too harsh */

	display: flex; /* Set body to be a flex container */
	align-items: center; /* Vertically centre content in the viewport */
	justify-content: center; /* Horizontally centre content in the viewport */

	min-height: 100vh; /* Force vertical centering since the content won't always be taller than the viewport */
	padding: 2rem; /* Using rem values as they don't cascade like em units and are not fixed units like pixels */
    background: rgb(200,14,14);
    background: linear-gradient(0deg, rgba(200,14,14,1) 0%, rgba(0,0,0,1) 100%);
    /* background-image: 
    linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.6)), 
    url('https://source.unsplash.com/random'); 
    /* Multiple Background images, 
    semi-transparent gradient used as a fallback for Edge */  
	background-position: center center;
	background-size: cover;
}
 
@supports(background-blend-mode: multiply) { /* Use a blend mode on the background in browser that support it */

	body {
        background: rgb(200,14,14);
		background: linear-gradient(0deg, rgba(200,14,14,1) 0%, rgba(0,0,0,1) 100%);
        /* background-image: linear-gradient(#4A4A4A, #212121), 
        url('https://source.unsplash.com/random'); 
        /* Multiple background images, Gradient overlay 
        and the Image */  
		background-blend-mode: multiply; /* Blending the Gradient with the Background Image (can't use black to blend) */
	}

 
}
h1 {
	font-family: 'Roboto Slab', serif; /* Use google font included as headline font */
	font-weight: 700; /* We've only included 700 */
	font-size: 2.25rem; /* 36px based on 16px base font size */
	line-height: 1.3333; /* based on 36px font size and a 48px line-height */
}

.card {
	display: flex; /* Sets entrire card element to be a flex container */
	flex-direction: column; /* Forces elements to align along the vertical axis */

	max-width: 62rem; /* base-spacing-unit multiplied 35 */
	min-height: 75vh; /* Always at least 75% of the viewport */

	background-color: white; /* Set background colour of our content card */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Add a subtle drop shadow */
}

	.card__image-container {
		max-height: 15rem; /* Stop the image getting too big */

		background-image: url('Logo.png');
		background-size: cover; /* Force the background image to cover the container */
		background-position: center center; /* Position the image in the middle */
	}

	.card__image {
		opacity: 0; /* Hide the image in the page, we need the DOM to render it so we have two elements with content in the card */
		pointer-events: none; /* Allows for the image to be clicked through */
	}

	.card__contents {
		display: flex; /* Make element a flex container */
		flex-direction: column; /* Align elements along the vertical axis */

		padding: 2rem;
	}

	.card__header,
	.card__footer {
		flex: 0 0 auto; /* Don't grow, don't shrink, automatic size (basis) */
	}
	.card__header1
	 {
		flex: 0 0 auto; /* Don't grow, don't shrink, automatic size (basis) */
	}

	.card__footer {
		margin-top: 2rem; /* create a bit of space between the content and the footer */
		text-align: right; /* align the contents of the footer to the right */
	}

	.card__body {
		flex: 1 1 auto; /* Same as flex:1; */
    }
    .card__body1, ul, li {
        flex: 1 1 auto; /* Same as flex:1; */
        color: white;
    }
    .card__agent {
        flex: 1 1 auto; /* Same as flex:1; */
        color: black;
	}
	.card__agent1 {
        flex: 1 1 auto; /* Same as flex:1; */
        color: white;
    }

	/* The flex properties of the card header, footer and body allows the footer to always be at the bottom of the container */

	.card__title {
		margin-top: 0; /* Remove margin as there are no elements above it */
    }
    .titleBg {
        max-width:100%;
        max-height:100%;
    }

@media only screen and (min-width: 400px) { /* base-spacing-unit * 30 */

    #titleBg {
        background-color: black;
    }
	.card {
		flex-direction: row; /* Align items along the horizontal axis */
        min-height: 60vh;
        
	}

		.card__image-container {
			flex: 0 1 45%; /* Don't grow, do shrink, 45% width (basis) */
			max-height: 100%; /* Reset the max-height set for mobile */
               background-color: black;    
              
     
        }

		.card__contents {
			flex: 1 1 55%; /* Grow, Shrink, 55% width */
			padding: 3rem; /* Increase padding now we have more space to play with */
    
		}
		 	.card__agent1 {
			flex: 1 1 auto; /* Same as flex:1; */
			color: white;
		} 
	 

}



/* Social icons based on: codepen.io/matchboxhero/pen/onzkC */

[class^="icon--"] {
    font-family: 'FontAwesome';
    font-style: normal;
    line-height: 1;
}

[class^="social-button"] {
   	display: inline-flex;
	align-items: center;
	justify-content: center;

   	height: 3rem;
    width: 3rem;

   	font-size: 1.4rem;
    color: white;
    border-radius: 50%;

    text-decoration: none;

    transition: background-color 150ms ease-in-out;

    margin-right: 0.1rem;
}

 
 

.social-button--twitter {
    background-color: black;
}

.social-button--twitter:hover {
    background-color: darkgray;
}

.social-button--twitters {
	background-color: black; 
}
.social-button--twitters:hover{
	background-color: gray;
}