@import '../variables';
@import '../modules/transparent-gradient';
@import '../modules/transparent-navbar';

html {
	height: 100%;
}

body {
	height: 100%;
	background-color: white;
}

.section--blog-header {
	.blog-background {
		background: url('../../img/headers/dots.png') no-repeat;
		background-color: #0082c9;
		background-position: center;
		background-size: cover;
		min-height: 0px;
		height: 100px;
		.topheader {
			width: 50%;
			max-width: 800px;
			margin-left: 8.33333333333%;
			h1 {
				margin-bottom: 10px;
				font-size: 50px;
				line-height: 120%;
				color: white;
				font-weight: 300;
			}
			h2.blog-metadata {
				.published {
					margin-right: 15px;
				}
				font-size: 20px;
				padding-bottom: 20px;
				margin-top: 0px;
				line-height: 1;
				color: white;
				text-shadow: none;
				img {
					width: 20px !important;
					padding-bottom: 3px;
				}
				small {
					font-size: 12px;
					color: white;
					text-shadow: none;
					a {
						text-decoration: underline;
						color: white;
					}

				}
			}
		}
	}
}
section {
	height: 100%;
	.container {
		height: 100%;
		.row {
			height: 100%;
			.col-md-10 {
				height: 100%;
				@media (min-width: $break-small) {
					padding-left: 50px;
					padding-right: 50px;
				}

			}
		}
	}
}


.section--content {
	.container {
		.row {
			position: relative;
			.content {
				z-index: 10;
				@media (min-width: $break-small) {
					padding-top: 70px;
				}
				background: white;
				padding-bottom: 30px;
				p {
					font-size: 18px;
					line-height: 1.7;
					color: #555;

					/*  This makes all links look more like on the rest of our website, even though it can also cause issues occasionally...  */
					a {
					    color: #a2a2a2;
						text-decoration: none;
						font-weight: 500;
						border-bottom: solid 1px;
						transition: all 0.5s ease;
						text-decoration: none;

						&:hover {
							text-decoration: none;
							color: #2a2a36;
						}
						&.button--blue {  /*to override settings from above...*/
							color: white;
							border: 1px solid white;
							&:hover {  /*to override settings from above...*/
								color: #0082c9;
								border: solid 1px #0082c9;
							}
						}
					}

				}
				blockquote {
					a {
/* 						color: #555; */
					}
				}
				.blog-metadata {
					.published {
						margin-right: 15px;
					}
					font-size: 20px;
					padding-bottom: 20px;
					margin-top: 0px;
					line-height: 1;
					img {
						width: 20px !important;
						padding-bottom: 3px;
					}
					a {
						text-decoration: none;
					}
					small {
						font-size: 12px;

					}
				}
				@media (min-width: $break-small) {
					h1 {
						margin-top: 120px;
						font-size: 50px;
						font-weight: 300;
					}
					h1:first-of-type {
						margin-top: 20px;
						font-size: 50px;
						font-weight: 300;
					}


					h2 {
						margin-top: 80px;
						font-size: 36px;
					}

					h3 {
						margin-top: 50px;
						font-size: 22px;
					}
				}

				h1 {
					margin-top: 80px;
					font-size: 35px;
					font-weight: 300;
				}
				h1:first-of-type {
					margin-top: 20px;
					font-size: 35px;
					font-weight: 300;
				}


				h2 {
					margin-top: 60px;
					font-size: 30px;
				}

				h3 {
					margin-top: 40px;
					font-size: 22px;
				}

				blockquote {
					p {
						display: inline;
					}
				}

				ul {
					padding-left: 30px;
					li {
						margin: 15px 0 0 0;
						list-style-image: url("../../img/enterprise/dot-small.svg");
					}
					ul {
						li {
							margin: 3px 0 0 0;
							list-style-image: url("../../img/enterprise/dot-tiny.svg");
							font-size: 90%;
						}
					}
				}

				figure {
					border: 1px solid #eee;
					padding: 5px;
					border-radius: 10px;
					max-width: 90%;
					@media (max-width: $break-small) {
						max-width: 80vw;
						margin-left: auto;
						margin-right: auto;
					}
					img {
						float: none;
						width: 100%;
						height: auto;
						box-shadow: none !important;
						max-width: 100% !important;
					}
					a {
						overflow: hidden;
						@media (max-width: $break-small) {
							margin-left: auto;
							margin-right: auto;
						}
						img {
							-moz-transition: all 0.3s;
							-webkit-transition: all 0.3s;
							transition: all 0.3s;
							box-shadow: none;
							max-width: 100%;
							@media (max-width: $break-small) {
								margin-left: auto;
								margin-right: auto;
							}
						}
						&:hover {
							img {
								-moz-transform: scale(1.1);
								-webkit-transform: scale(1.1);
								transform: scale(1.1);
							}
						}
					}
				}

				/* animation on zoom on images with a link */
				.row>[class*='col-md']>a,
				a.image--animate {
					margin: 2%;
					overflow: hidden;
					@media (max-width: $break-small) {
							margin: 60px auto;
					}
					img {
						-moz-transition: all 0.3s;
						-webkit-transition: all 0.3s;
						transition: all 0.3s;
						box-shadow: 0 0 2px 1px #EEE;
						@media (max-width: $break-small) {
							margin: 60px auto;
						}
					}
					&:hover {
						img {
							-moz-transform: scale(1.1);
							-webkit-transform: scale(1.1);
							transform: scale(1.1);
						}
					}
				}

				/* images in various sizes */
				img {
					@media (min-width: $break-small) {
						max-width: 100%;
					}
					@media (max-width: $break-small) {
							max-width: 70vw;
					}
				}
				.size-thumbnail {
					width: auto;
					height: auto;
					max-width: 100px;
					max-height: 100px;
					box-shadow: 0 0 2px 1px #EEE;
					padding: 5px 5px 5px 5px;
					img {
						padding: 5px 5px 5px 5px;
						box-shadow: none !important;
					}
				}
				.size-small {
					width: auto;
					height: auto;
					max-width: 200px;
					max-height: 200px;
					box-shadow: 0 0 2px 1px #EEE;
					padding: 5px 5px 5px 5px;
					img {
						padding: 5px 5px 5px 5px;
						box-shadow: none !important;
					}
				}
				.size-medium {
					width: auto;
					height: auto;
					max-width: 350px;
					max-height: 550px;
					box-shadow: 0 0 2px 1px #EEE;
					padding: 5px 5px 5px 5px;
					article.video-wall {
						@media (min-width: $break-small) {
							min-width: 0px !important;
							max-width: 100% !important;
							max-height: 450px !important;
							.video-link {
								width: 100% !important;
							}
						}
					}
					@media (max-width: $break-small) {
						max-width: 90%;
						max-height: 90%;
					}
					img {
						padding: 5px 5px 5px 5px;
						box-shadow: none !important;
					}
				}
				.size-large {
					float: none;
					margin-left: auto;
					margin-right: auto;
					text-align: center;
					width: auto;
					height: auto;
					max-width: 650px;
					max-height: 100%;
					box-shadow: 0 0 2px 1px #EEE;
					img {
						margin-left: auto;
						margin-right: auto;
						text-align: center;
						padding: 5px 5px 5px 5px;
						box-shadow: none !important;
					}
				}
				.size-full {
					float: none;
					margin-left: auto;
					margin-right: auto;
					text-align: center;
					width: auto;
					height: auto;
					max-width: 100%;
					max-height: 100%;
					box-shadow: 0 0 2px 1px #EEE;
					img {
						margin-left: auto;
						margin-right: auto;
						text-align: center;
						padding: 5px 5px 5px 5px;
						box-shadow: none !important;
					}
				}
				div[class*='size-'] {
					padding: 0 15px;
					img {
						max-width: 100%;
					}
				}

				/* alignment of images and divs */
				.alignright, .align-right {
					float: right;
					@media (max-width: $break-small) {
						float: none;
						margin-left: auto;
						margin-right: auto;
						text-align: center;
					}
				}
				.alignleft, .align-left {
					float: left;
					@media (max-width: $break-small) {
						float: none;
						margin-left: auto;
						margin-right: auto;
						text-align: center;
					}
				}
				.align-center, .aligncenter {
					float: none;
					margin-left: auto !important;
					margin-right: auto !important;
					text-align: center !important;
				}

				.fullwidth,
				.banner {
						margin: 50px -150px; /* cancel out page margin */
						width: calc(100% + 300px); /* account for double page margin */
						max-width: 100vw;
				}

			}
		}
	}
}

.section--footer {
	.container {
		.row {
			.col-md-10 {
				z-index: 15;
/* 				box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 10px 20px 0 rgba(0, 0, 0, 0.19); */
				padding-top: 20px;
				padding-bottom: 100px;
				background: white;
			}
		}
	}
}