/* font import */
/*
@font-face{
    font-family:'SalesforceSansBold';
    src:url('../fonts/SalesforceSans-Bold.eot');
    src:url('../fonts/SalesforceSans-Bold.eot?#iefix') format('embedded-opentype'),url('../fonts/SalesforceSans-Bold.woff') format('woff'),url('../fonts/SalesforceSans-Bold.woff2') format('woff2'),url('../fonts/SalesforceSans-Bold.ttf') format('truetype'),url('../fonts/SalesforceSans-Bold.svg#SalesforceSansBold') format('svg');
    font-weight:normal;
    font-style:normal
}
@font-face{
    font-family:'SalesforceSansBoldItalic';
    src:url('../fonts/SalesforceSans-BoldItalic.eot');
    src:url('../fonts/SalesforceSans-BoldItalic.eot?#iefix') format('embedded-opentype'),url('../fonts/SalesforceSans-BoldItalic.woff') format('woff'),url('../fonts/SalesforceSans-BoldItalic.woff2') format('woff2'),url('../fonts/SalesforceSans-BoldItalic.ttf') format('truetype'),url('../fonts/SalesforceSans-BoldItalic.svg#SalesforceSansBoldItalic') format('svg');
    font-weight:normal;
    font-style:normal
}
@font-face{
    font-family:'SalesforceSansItalic';
    src:url('../fonts/SalesforceSans-Italic.eot');
    src:url('../fonts/SalesforceSans-Italic.eot?#iefix') format('embedded-opentype'),url('../fonts/SalesforceSans-Italic.woff') format('woff'),url('../fonts/SalesforceSans-Italic.woff2') format('woff2'),url('../fonts/SalesforceSans-Italic.ttf') format('truetype'),url('../fonts/SalesforceSans-Italic.svg#SalesforceSansItalic') format('svg');
    font-weight:normal;
    font-style:normal
}
@font-face{
    font-family:'SalesforceSansLight';
    src:url('../fonts/SalesforceSans-Light.eot');
    src:url('../fonts/SalesforceSans-Light.eot?#iefix') format('embedded-opentype'),url('../fonts/SalesforceSans-Light.woff') format('woff'),url('../fonts/SalesforceSans-Light.woff2') format('woff2'),url('../fonts/SalesforceSans-Light.ttf') format('truetype'),url('../fonts/SalesforceSans-Light.svg#SalesforceSansLight') format('svg');
    font-weight:normal;
    font-style:normal
}
@font-face{
    font-family:'SalesforceSansLightItalic';
    src:url('../fonts/SalesforceSans-LightItalic.eot');
    src:url('../fonts/SalesforceSans-LightItalic.eot?#iefix') format('embedded-opentype'),url('../fonts/SalesforceSans-LightItalic.woff') format('woff'),url('../fonts/SalesforceSans-LightItalic.woff2') format('woff2'),url('../fonts/SalesforceSans-LightItalic.ttf') format('truetype'),url('../fonts/SalesforceSans-LightItalic.svg#SalesforceSansLightItalic') format('svg');
    font-weight:normal;
    font-style:normal
}
@font-face{
    font-family:'SalesforceSansRegular';
    src:url('../fonts/SalesforceSans-Regular.eot');
    src:url('../fonts/SalesforceSans-Regular.eot?#iefix') format('embedded-opentype'),url('../fonts/SalesforceSans-Regular.woff') format('woff'),url('../fonts/SalesforceSans-Regular.woff2') format('woff2'),url('../fonts/SalesforceSans-Regular.ttf') format('truetype'),url('../fonts/SalesforceSans-Regular.svg#SalesforceSansRegular') format('svg');
    font-weight:normal;
    font-style:normal
}
@font-face{
    font-family:'SalesforceSansThin';
    src:url('../fonts/SalesforceSans-Thin.eot');
    src:url('../fonts/SalesforceSans-Thin.eot?#iefix') format('embedded-opentype'),url('../fonts/SalesforceSans-Thin.woff') format('woff'),url('../fonts/SalesforceSans-Thin.woff2') format('woff2'),url('../fonts/SalesforceSans-Thin.ttf') format('truetype'),url('../fonts/SalesforceSans-Thin.svg#SalesforceSansThin') format('svg');
    font-weight:normal;
    font-style:normal
}
@font-face{
    font-family:'SalesforceSansThinItalic';
    src:url('../fonts/SalesforceSans-ThinItalic.eot');
    src:url('../fonts/SalesforceSans-ThinItalic.eot?#iefix') format('embedded-opentype'),url('../fonts/SalesforceSans-ThinItalic.woff') format('woff'),url('../fonts/SalesforceSans-ThinItalic.woff2') format('woff2'),url('../fonts/SalesforceSans-ThinItalic.ttf') format('truetype'),url('../fonts/SalesforceSans-ThinItalic.svg#SalesforceSansThinItalic') format('svg');
    font-weight:normal;
    font-style:normal
}
*/
/* PAGE CSS */
html,body,div{
	margin:0px;
	padding:0px;
}
/*
body{
	background:#222;
	color:#333;
	font-family:SalesforceSansLight, arial,sans-serif;
}*/
div.guide{
	width:100%;
}
div.wrapper{
	/*background-color:#333;*/
}
div.element{
	width:50%;
	float:left;
	height:100%;
	z-index:7;
}	
div.element h2{
	font-size:24px;
	color:#333;
	font-weight:bold;
}
div.element#data{
	background:url('../images/data-com-image-2.jpg') no-repeat center center;
	background-size:cover;
}
div.element#connect{
	background:url('../images/data-connect-image-2.jpg') no-repeat center center;
	background-size:cover;
}
div.content{
	top:0px;
	padding:0px;
}
div.content #data_content, div.content #connect_content{
	position:relative;
	padding:100px 40px 20px 40px;
	top:30%;
	text-align:center;
	height:300px;
}
.element h2,.element p{
	margin:0 auto;
	padding-bottom:10px;
}
div.footer{
	background:#ccc;
	text-align:center;
	z-index:10;
	clear:both;
}
div.footer p, div.footer a{
	font-size:12px;
	line-height:24px;
	margin:0px;
}
a.button{
	display:block;
	border-radius:20px;
	padding:5px;
	text-transform:uppercase;
	background: #fff;
	/*border:2px solid #5eb4ff;*/
	color:#5eb4ff;
	width:130px;
	/*margin:0 auto;*/
	text-decoration:none;
	font-size:.9rem;
	font-weight:bold;
	font-family:SalesforceSansBold,arial,sans-serif;
}
a.button:hover{
	background:#5eb4ff;
	color:white;
}
.blur{
	/*-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-o-filter: blur(1px);
	-ms-filter: blur(1px);
	filter: blur(1px);*/
	opacity:.7;

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.transparent_band{
	top:20%;
	position:relative;
	transition: all .2s ease;
	background: url('../images/white-circle_v2.png') center center no-repeat;
	background-size:70%;
}

.white_band{
	background-size:80%;
}

#connect_content, #data_content{
	max-width:350px;
	margin:0 auto;
	text-align:center;
	transition: all .3s ease;
}
#connect_content:hover, #data_content:hover{
	transform: scale(1.1);
}

.bottom-20{padding-bottom:20px;}
.top-20{padding-top:20px;}


div.two-col{
	width:100%;
	height:100vh;
}
a.button{
	display:block;
	border-radius:5px;
	background:rgba(46, 92, 162, 1);
	color:white;
	text-decoration:none;
	width:130px;
	padding:10px;
	text-align:center;
}
a.button:hover{
	background:rgba(46, 92, 162, .9)
}
a.button:active{
	background:rgba(46, 92, 162, .8)
}
div.jumbo{
	height:550px;
	min-height:400px;
	background:url('../images/data-banner-0318.png') no-repeat center center;
	background-size:cover;
	width:100%;
}
div.sfdc-logo{
	width:88px;
	height:81px;
}
div.jumbo-introduction{
	display:block;
	width:30%;
	top:50px;
	position:relative;
	float:left;
	padding-left:200px;
	font-family:SalesforceSans-Light,ProximaNova,Arial,sans-serif;
}
div.jumbo-introduction > h2{
	font-size:42px;
	line-height:1em;
	color: #003C4C;
	font-family:SalesforceSansLight, arial,sans-serif;
}
div.jumbo-introduction > p {
	font-size:1.4rem;
	line-height:1.6rem;
	font-family:SalesforceSansLight, arial,sans-serif;
}
div.three-col{
	width:100%;
	background:#f4f4f4;
	margin:0 auto;
	display:flex;
	justify-content: space-evenly;
}
div.three-col > div.col{
	flex:flex-grow;
	width:25%;
	min-height:300px;
	background:white;
	margin:auto;
	margin-top:20px;
	margin-bottom:20px;
}
img.thumbnail{width:100%;padding-bottom:20px;}
div.card{padding:20px;}
div.card > a.button{
	margin:0 auto;
}
p{font-size:1rem;line-height:1.3rem;}
h3{
	font-size:1.4rem;
	color:#184476;
	padding-bottom:0px;
	font-family:SalesforceSansLight, arial,sans-serif;
	line-height:1.5rem;
}
	
/* MOBILE */

@media (max-width:1400px){
	div.jumbo-introduction{
		width:50%;
	}
}

@media (max-width:1023px){
	div.element{
		width:100%;
		min-width:300px;
		float:none;
		height:50%;
	}
	div.content #data_content, div.content #connect_content{
		width:250px;
	}

	.transparent_band{
		top:10%;
		background-size:cover;
	}
	div.footer p{
		max-width:350px;
		margin:0 auto;
	}
	
	div.jumbo{
		min-height:800px;
		background-position: center center;
	}
	div.jumbo-introduction{
		float:none;
		top:auto;
		left:auto;
		padding:10px;
		width:90%;
	}
	div.jumbo-introduction > h2{
		font-size:1.4 rem;
	}
	div.jumbotron-introduction > p{
		font-size:.8 rem;
	}
	div.three-col{
		flex-direction:column;
	}
	
	div.three-col > div.col{
		width:80%;
	}
}
@media (max-width:767px) and (max-height:720px) /* fix padding on tiny viewport */
{
	div.content #data_content, div.content #connect_content{
		padding:5px;
	}
	.transparent_band{
			top:5%;
	}
}
@media (max-height:480px){
	.transparent_band,div.content #data_content, div.content #connect_content{
		top:0;
	}
	div.content #data_content, div.content #connect_content{
		padding:5px;
	}
}