/*
Theme Name: MeshSmart
Theme URI: http://www.meshsmart.com/wp-content/themes/meshsmart
Description: Custom theme for MeshSmart using Bootstrap framework.
Author: Jack Walker
Version: 1.0
Tags: responsive, bootstrap, meshsmart

Simple theme for use with meshsmart.com 
*/

body { 
	font-family: 'Varela Round', sans-serif;
    font-weight: 100;
    letter-spacing: 0.6px;
}

h1, h2, h3, h4, h5, h6 {

}

p {
	line-height: 1.25;

	&.heading {
		font-weight: 400;
		font-size: 1.1em;
	}
	&.white { color: #fff; }
	&.off-white { color: #efefef; }
	&.pale-blue { color: #ebfdff; }
	&.deep-sky-blue { color: #2497cf; }

	&.black { color: black; }
	&.dark-grey { color: #656565; }
	&.grey { color: #888; }
	&.teal { color: #008fa7; }
	&.red-pink { color: #e3566c; }
}

span {
	&.heading {
		font-weight: 400;
		font-size: 1.2em;
	}
}
a {
	color: #007bff;
	&:hover {
		color: #007bff;
	}
}

textarea {

	&.form-control {
	    height: 100px !important;
	    resize: none;
	}
}

label {
	display: block;
}

#main {
	display: block;
	min-height: 300px;
}


.ms-button {
	padding: 5px 30px;
	text-transform: uppercase;
	border: 2px solid #008fa7;
	color: #008fa7;
	font-size: 1.2em;
	display: inline-block;
	transition: all 0.6s;

	&.dark {
		color: #00768a;
		border-color: #00768a;

		&:hover {
			background-color: #00768a;
			color: #a0e4f3;
			border-color: #00768a;
		}

	}

	&:hover {
		text-decoration: none;
		color: #b7b7b7;
		border-color: #b7b7b7;
	}
}

.center-text {
	text-align: center;
}

// Full width background colours
.ms-background {

	&.white { background-color: white; }
	&.vibrant-blue { background-color: #56d9ef; }
	&.pale-blue { background-color: #ebfdff; }
	&.light-grey { background-color: #eee; }
	&.grey { background-color: #888; }
	&.teal { background-color: #008fa7; }
}


.heading {
	line-height: 1.5;

	&.shadow {
		text-shadow: 1px 1px #aaa;
	}

	&.white { color: #fff; }
	&.deep-sky-blue { color: #2497cf; }
	&.black { color: black; }
	&.grey { color: #888; }
	&.teal { color: #008fa7; }
	&.red-pink { color: #e3566c; }
}

.ms-uppercase {
	text-transform: uppercase;
}

.ms-page-title {
	color: #e3566c;
}

.ms-application-row {
    border: 1px solid #1e8fa6;
    background-color: white;
    margin-bottom: 20px;
    border-radius: 10px;

	img {
		width: 100%;
		padding: 3px;
    	border: 1px solid #ddd;

	}
}

.ms-applications-bg {
	background: url('/wp-content/uploads/2017/10/Parking-Lot.jpg');
	background-color: #008fa7;
	background-position-y: 80%;
	background-size: cover;
	min-height: 200px;
}

.ms-preview {

	img {
		width: 100%;
		height: auto;
	}

	span {
		display: block;
	    width: 100%;
	    padding: 10px 0;
	    color: #6f6f6f;
	    text-align: center;
	}
}

.ms-btn {
	padding: 8px 20px;
	color: white;
	background-color: #008fa7;
	transition: background 0.3s;

	&:hover{
		color: white;
		text-decoration: none;
		background-color: #39a7b9;
	}
}

.ms-tag-line {

}

.ms-overlap-next-row {
	margin-bottom: -75px;
}
.ms-overlap-previous-row {
	padding-top: 75px;
}

.ms-panel {
	border-radius: 10px;
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: white;
    box-shadow: 1px 1px 1px 0 #ddd;
    p {
		line-height: 1.6;
	}
}


// Blog 
.ms-post-header {

	.ms-category-nav {
	    padding: 40px 0 20px;

	    h5 {
			display: inline-block;
			font-weight: 300;
			color: #656565;
			margin-right: 10px;
		}

		ul {
			display: inline-block;
		    list-style: none;
		    -webkit-padding-start: 0px;
		    font-size: 0.9em;

		    &.curr-all {
		    	li.cat-item-all {
		    		background-color: #fff;
					border-radius: 4px; 
					&:hover {
						text-decoration: none;
						cursor: default;
					}
					a {
						color: #333;
						&:hover {
							text-decoration: none;
							cursor: default;
						}
					}
		    	}
		    }

		    li {
			    display: inline-block;
			    padding: 5px 10px;
			    font-size: 1.2em;

			    &.current-cat {
			    	background-color: #fff;
					border-radius: 4px;
					&:hover {
						text-decoration: none;
						cursor: default;
					}
					a {
						color: #333;
						&:hover {
							text-decoration: none;
							cursor: default;
						}
					}
			    }
			}

		}
	}
}
/* Single Blog */
.ms-blog-single {
	header {
		position: relative;
	}
	.ms-post-info {
		padding: 50px 20px;
	}
}

#ms-custom-slider-auto {
    height: 500px;
    position: relative;

	.ms-slick-slide {

		&.slick-slide {
		    position: relative;
		    background-color: #b5b5b5;

			img {
			    height: auto;
			    top: 50%;
			    transform: translateY(-50%);
			    -ms-transform: translateY(-50%);
			    -webkit-transform: translateY(-50%);
			    -moz-transform: translateY(-50%);
			    left: 0;
			    position: absolute;
			    z-index: 10;
			}
		}
	}
}

.slick-dots {
    position: absolute;
    bottom: 0px;
    z-index: 200;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;

    li {
	    position: relative;
	    display: inline-block;
	    width: 20px;
	    height: 20px;
	    margin: 0 5px;
	    padding: 0;
	    cursor: pointer;

	    &.slick-active {

	    	button{
	    		&::before {
	    			color: #2497cf;
	    		}
	    	}
	    }

	    button {
		    font-size: 0;
		    line-height: 0;
		    display: block;
		    width: 20px;
		    height: 20px;
		    padding: 5px;
		    cursor: pointer;
		    color: transparent;
		    border: 0;
		    outline: none;
		    background: transparent;

		    &::before {
			    font-family: slick;
			    font-size: 22px;
			    line-height: 20px;
			    position: absolute;
			    top: 0px;
			    left: 0px;
			    width: 20px;
			    height: 20px;
			    content: "•";
			    text-align: center;
			    opacity: 0.5;
			    color: #ffffff;
    			text-shadow: 0px 0px 2px #616161;
			    -webkit-font-smoothing: antialiased;
			}
		}
	}
}

.ms-slideshow-arrow {
    display: block;
    padding: 30px 10px;
    position: absolute;
    font-size: 2em;
    top: 50%;
    z-index: 75;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    cursor: pointer;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -khtml-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;

    &.right {
		right: 0;
		.ms-slideshow-arrow {
			right: 0;
		}
	}  

	&.left {
		left: 0;
		.ms-slideshow-arrow {
			left: 0;
		}
	}  
}


.ms-blog-slider-overlay {
    position: absolute;
    bottom: 0;
    height: 30%;
    background: rgba(76, 77, 78, 0.45);
    flex-direction: column;
    left: 0;
    right: 0;
    text-align: center;

    h1,
	h2, 
	h3, 
	h4 {
		text-align: center;
		color: white;
	}
	h1 {
		font-size: 3.6em;
	    font-weight: 600;
	}
	h3 {
		font-weight: 300;
		font-style: italic;
		text-transform: capitalize;
	}
	.ms-slideshow-arrow {
		background-color: transparent;
	}

}


/* Multi - Blog Rows style */
.ms-post-multirows {
	padding-top: 30px;
	padding-bottom: 30px;

	.row {
		background-color: #fff;
		border: 1px solid #a9a9a9;
	}

	.ms-post-thumbnail {
		height: 300px;
	    overflow: hidden;
		position: relative;
		border-right: 1px solid #a9a9a9;

		img {
			&:hover {
				filter: grayscale(0.5);
			}
		    width: 100%;
		    height: auto;
		    position: absolute;
		    top: 50%;
		    left: 0;
		    cursor: pointer;
		    		transform: translateY(-50%);
		        -ms-transform: translateY(-50%);
		    -webkit-transform: translateY(-50%);
		       -moz-transform: translateY(-50%);
			    	transition: filter 0.5s;
			-webkit-transition: filter 0.5s;
		       -moz-transition: filter 0.5s;
		         -o-transition: filter 0.5s;
		     -khtml-transition: filter 0.5s;
		}
	}
	.ms-post-info {
		padding: 40px;
		font-weight: 400;
		a {
			h3 {
			    color: #545454;
			    font-weight: 300;
			    text-transform: uppercase;
			}
			&:hover {
				text-decoration: none;
			}
		}
		.ms-post-subinfo {

			span{
				&:first-child {
					margin-right: 20px;
				}
				&:last-child {
					color: #337ab7;
				}
				i {
					margin-right: 5px;
					color: #333;
				}
			}
		}
		.ms-post-desc {
			margin-top: 20px;
			margin-bottom: 70px;
			font-size: 1.2em;
		    font-weight: 200;
		    color: #616161;
		    overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
	}
}
/* Recent Posts */
.ms-recent-posts-row { 
	padding: 15px 0; 
	a {
		&:hover {
			text-decoration: none;
		}
	}
	h2 {
		text-align: center;
		font-weight: 100;
		color: #696969;
	}
	.ms-post-info {
		h5 {
			text-align: center;
			padding: 10px 0;
			color: #797979;
    		text-transform: uppercase;
		}
	}
}

.ms-post-multi { 
	margin-top: 15px;
	margin-bottom: 15px;

	.ms-post-thumbnail {
		height: auto;
		overflow-y: hidden;

		img {
			width: 100%;
			height: auto;
		}
	}

	.ms-post-info {
		width: 100%;
    	background-color: white;
	}
	
}

// Pagination
.ms-pagination { 
	text-align: center; 
	.page-numbers {
	    color: #404040;
	    font-weight: 400;
	    display: inline-block;
	    width: 30px;
	    position: relative;
	    height: 30px;
	    vertical-align: top;
	    padding: 5px;
	    background-color: #bdbdbd;
	    margin: 0 2px;

	    .current {
			background-color: #28ace2;
			color: #fff;
			cursor: default;
		}
	    i {
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translateX(-40%) translateY(-50%);
		    color: #fff;
		}
	    &:hover {
	    	background-color: #28ace2;
			color: #fff;
		    text-decoration: none;
	    }
	}
}

// Contact
.ms-contact-form {
	h3{
		text-transform: uppercase;
	}
}
.ms-contact-info {
	color: #b7b7b7;
	line-height: 2;
	padding-top: 25px;

	p {
		color: #555;
	}
}


.ms-parallax {
	position: fixed;
    top: 76px;
    left: 0px;
    right: 0px;
   	z-index: -1;
}

.ms-parallax-padding {
	margin-top: 586px;
}

.ms-features-row {

	div {
		img {
			height: 33%;
			width: 50%;
		}
	}
}
.ms-products-page {

	p {
		line-height: 1.6;
	}



	.card {

		.card-header {
			background-color: #008fa7;

			h5 {
				a {
					width: 100%;
					display: block;
					color: #fff;

					&:hover {
						text-decoration: none;
						color: #fff;
					}
				}
			}
		}
		.card-body {
			color: #888;
		}
	}
}

.ms-image {
	height: auto;
	width: 100%;
}

.ms-sidebar-panel {
	background-color: #fff;
	border: 2px solid #008fa7;
	margin-top: 20px;
	padding: 20px;
	border-radius: 12px;

	ul {
		-webkit-padding-start: 0;

		li {
			list-style: none;

			a {
				display: block;
				width: 100%;
				color: #888;
				padding: 5px;
				margin: 10px 0;

				&:hover {
					text-decoration: none;
				}
			}
		}
	}

}




// Forms
.form-group {

	label {
		text-transform: uppercase;
		color: #b7b7b7;

		span {
			&:first-child {
				padding-left: 25px;
				line-height: 28px;
			}
		}
	}
	.form-control {
		display: block;
	    width: 100%;
	    height: 50px;
	    padding: 11.5px 25px;
	    font-size: 14px;
	    line-height: 1.78571;
	    color: #797979;
	    background-color: #f2f2f2;
	    background-image: none;
	    border: 1px solid #f2f2f2;
	    border-radius: 30px;
	    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	}
}

.ms-form-row {
	padding-top: 40px;
}

// Buttons
.btn {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 400;
    font-family: Montserrat, sans-serif;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    letter-spacing: 0.1em;
    cursor: pointer;
    background-image: none;
    border: 3px solid #ccc;
    white-space: nowrap;
    padding: 18px 56px;
    font-size: 17px;
    line-height: 24px;
    border-radius: 0px;
    transition: .2s all ease;

    &.btn-streamline {
    	padding: 5px 30px;
    	background: #2496cf;
    	border-width: 1px;
	    border-color: #2496cf;
	    color: #fff;

	    &:hover {
	    	background: white;
		    border-color: #2496cf;
		    color: #2496cf;
	    }
    }

    // Button block in a form
    &.btn-block {
	    display: block;
	    width: 100%;
	    padding: 11.5px 25px;
	    font-size: 14px;
	    height: 50px;
	    margin-top: 25px;
	    border-radius: 30px;

	    &.yellow {
	    	background-color: #eede7c;
	    	border-color: #eede7c;
	    }

	    &:hover {
	    	color: #495057;
		    background-color: #fff;
		    border-color: #80bdff;
		    outline: 0;
	    }
	}
}

// Header
.ms-header {
	background-color: white;
	border-bottom: 1px solid #ccc;

	.navbar {

		.navbar-brand { 
			height: auto;     
			padding-right: 0;
		    padding-left: 0; 
		}

		.navbar-nav {

			.dropdown-menu {

				.menu-item {
					padding-top: 5px;
					padding-bottom: 5px;
				}
			}

			.menu-item {
				padding-left: 10px;
				padding-right: 10px;

				a {
					color: #222;
					font-weight: 400;

					&:hover {
						text-decoration: none;
					}
				}

				&.active {
					a {
						color: #2497cf;
					}
				}
			}
		}
	}
}

// Footer
.ms-footer {
    padding-top: 25px;
    border-top: 1px solid #d2d2d2;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;  				
    background-color: #efefef;
    color: #444;
    box-shadow: inset 0px 1px 8px 0px rgba(132, 130, 130, 0.7);

	h5 {
		color: #2497cf;
		text-transform: uppercase;
		margin-bottom: 10px;
	}


	.ms-footer-nav {

		ul {
			list-style: none;
			-webkit-margin-before: 0px;
  			-webkit-padding-start: 0px;

  			li {
  				padding: 4px 0;
  				a { 
  					color: inherit;

  					&:hover {
  						color: inherit;
  					}
  				}
  				.fa {
  					transition: color 0.4s;

  					&:nth-child(2) {
  						padding: 4px 4px;
  					}

  					&:hover {
  						color: #2497cf;
  					}
  				}
  				
  			}

  			ul {

  				li {
  					display: inline-block;

  					a {
	  					color: inherit;
	  					&:hover {
	  						color: inherit;
	  					}
	  				}
  				}
  			}
		}
	}

	.footer-bottom {
		border-top: 1px solid #dedede;

	}
}




@media (min-width: 768px) {

	.ms-post-multi {
		.ms-post-thumbnail { 
			height: 175px; 
			position: relative; 
		}
	}
	.ms-post-multi {
		.ms-post-thumbnail {
			img { 
				width: 100%;
				height: auto;
				position: absolute;
			   	top: 50%;
		    	transform: translateY(-50%);
			    -ms-transform: translateY(-50%);
			    -webkit-transform: translateY(-50%);
			    -moz-transform: translateY(-50%);
			}
		}
	}

}

@media (min-width: 768px) {
	.ms-sidebar-panel {
		margin-top: 0;
	}
}


@media (min-width: 768px) and (max-width: 991px) {
	.heading {
		line-height: 1.25;
	}
}


@media (min-width: 992px) {
	.navbar-expand-lg .navbar-nav .dropdown-menu {
	    min-width: 250px;
	}
	.ms-applications-bg {
		min-height: 400px;
	}
	.ms-post-multi {
		.ms-post-thumbnail { 
			height: 155px; 
		}
	}
}


