/* app.css for Web Worx Design */

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
		position: relative;
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;
}

.row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}

.ml-1, .mx-1 {
	margin-left: .25rem !important;
}

.mr-1, .mx-1 {
	margin-right: .25rem !important;
}

.services-paragraph {
	padding-left: 10px;
	padding-right: 10px;
	text-align: justify;
}

.card-deck {
	display: flex;
}

.card-deck .card {
	margin-bottom: 15px;
}

.card {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
	border: 0;
	font-weight: 400;
	position: relative;
	/*min-width: 0;*/
	word-wrap: break-word;
	background-color: #ffffff;
	background-clip: border-box;
	border: 1px solid rgba(0,0,0,.125);
	/*border-radius: .25rem;*/
	/* New shit for testing*/
	width: 100%;
	display: inline-block;
	margin-bottom: 30px;
	border-radius: 6px;
}

.card .card-image {
	height: 60%;
	position: relative;
	overflow: hidden;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: -30px;
	border-radius: 6px;
	box-shadow:  0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.mb-4 {
	margin-bottom: 1.5rem !important;
	min-width: 300px;
}

.view {
	position: relative;
	overflow: hidden;
	cursor: default;
}

.view img, .view video {
	position: relative;
	display: block;
}

.card-img-top {
	width: 100%;
	border-top-left-radius: calc(.25rem-1px);
	border-top-right-radius: calc(.25rem-1px);
	height: 100%;
}

.card-img {
	height: 60%;
	position: relative;
	overflow: hidden;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: -30px;
	border-radius: 6px;
	box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

img {
	vertical-align: middle;
	border-style: none;
}

#logo {
	max-height: 280px;
	margin-top: -102px;
}

.overlay .mask {
	opacity: 0;
	transition: all .4s ease-in-out;
}

.view .mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-attachment: fixed;
}

.card-blog {
	margin-top: 30px;
}

.waves-effect {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

a {
	cursor: pointer;
	text-decoration: none;
	color: #007bff;
	-webkit-transition: all 2s ease-in-out;
	-o-transition: all 2s ease-in-out;
	transition: all 2s ease-in-out;
	background-color: transparent;
}

.rgba-white-slight {
	background-color: rgba(255,255,255,.1);
}

.card-body {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	-webkit-border-radius: 0;
	border-radius: 0 !important;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	padding: 1.25rem;
}

.card-title {
	margin-bottom: .75rem;
}

h4 {
	font-size: 1.5rem;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: .5rem;
	font-weight: 500;
	line-height: 1.2;
	margin-top: 0;
}

.card .card-body .card-text {
	color: #747373;
	font-size: .9rem;
	font-weight: 400;
}

p {
	margin-top: 0;
	margin-bottom: 1rem;
	margin-left: 20px;
	margin-right: 20px;
}

.services-paragraph {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

[type="button"]:: -moz-focus-inner, [type="reset"]:: -moz-focus-inner, [type="submit"]:: -moz-focus-inner, button:: -moz-focus-inner {
	padding: 0;
	border-style: none;
}

.btn .btn-md {
	padding: .7rem 1.6rem;
	font-size: .7rem;
}

[type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) {
	cursor: pointer;
}

[type="reset"], [type="submit"], button, html [type="button"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.btn-light-blue {
	background-color: #acdcee !important;
	color: #26426d;
}

.btn {
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
	padding: 0.5rem 2.14rem;
	font-size: 0.75rem;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color: .15s ease-in-out, box-shadow: .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
	margin: .375rem;
	border: 0;
	-webkit-border-radius: .125rem;
	border-radius: .125rem;
	cursor: pointer;
	text-transform: uppercase;
	white-space: normal;
	word-wrap: break-word;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
	line-height: 16.8px;
	position: relative;
	display: inline-block;
}

.fill-light {
	background-color: #f6f5f6;
}

.text-light {
	color: #f6f5f6;
}

.fill-accent-light {
	background-color: #ffba08;
	/*background-color: #acdcee;*/
}

.text-accent-light {
	color: #acdcee;
}

.text-light-shade-blue {
	color: #8d97a1;
}

.fill-light-shade-blue {
	background-color: #8d97a1;
}

.fill-primary {
	background-color: #246681;
}

.text-main {
	color: #f33535;
	/*color: #246681;*/
}

.fill-main {
	background-color: #f33535;
	/*color: #246681;*/
}

.fill-accent-dark {
	background-color: #819ca6;
}

.text-accent-dark {
	color: #819ca6;
}

.fill-dark {
	background-color: rgb(28,49,68);
	/*background-color: #201628;*/
}

.text-dark {
	color: rgb(28,49,68);
	/*color: #201628;*/
}

.fill-darker {
	background-color: #1a2b45;
}

.colour-block {
  background:#1a2b45;
  width:100%;
  padding:7% 20% 10% 20%;
  color:#fff;
}
.white-block {
  background:#fff;
  width:100%;
  padding:7% 20% 10% 20%;
  color:#1a2b45;
}

.white-block h1, .color-block h1 {
  text-align:center;
  font-size:60px;
  font-family:'wire one', serif;
  font-weight:normal;
  margin-top: 25px;
  padding-top: 20%;
}
p {
  font-size:18px;
  font-family:'Raleway', serif;
}


/*------------------*/
/*  SKEW CLOCKWISE  */
/*------------------*/
.skew-cc{
  width:100%;
  height:100px;
  position:absolute;
  left:0px;
  background: linear-gradient(to right bottom, #1a2b45 49%, #fff 50%),    linear-gradient(-50deg, #ffffff 16px, #000 0);
}


/*-------------------------*/
/* SKEW COUNTER CLOCKWISE  */
/*-------------------------*/
.skew-c{
  width:100%;
  height:100px;
  position:absolute;
  left:0px;
  background: linear-gradient(to left bottom, #fff 49%, #1a2b45 50%);
}
@media screen and (min-width: 576px) {
	.card-deck {
		flex-flow: row wrap;
		margin-left: -15px;
		margin-right: -15px;
	}

	.card-deck .card {
		display: flex;
		flex: 1 0 0%;
		flex-direction: column;
		margin-left: 15px;
		margin-right: 15px;
		margin-bottom: 0px;
	}
}

@media screen and (min-width: 768px) {
	.col-md-12 {
		flex: 0 0 100%;
		max-width: 100%;
		padding-right: 15px;
		padding-left: 15px;
		width: 100%;
		position: relative;
	}
}