@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

body div section {
	padding: 50px 0 0 0;
}
#slide-show{
	padding : 0;
}
.button{
    margin: 50px 0;
}
.contactInfo{
	padding-left: 10px;
}
.thumbnail{
	border: none;
}
.address{
	padding-left: 0;
}
.icon-medium{
	width: auto;
}



/* General font-size for this theme is smaller when used with Bootstrap 3, increase the size a bit */
body {
	font-size: 14px;
}
/* Bootstrap 3 creates gray dividers, works bad on bright green bg. Because of whitespace from thymeleaf padding is adjusted too. */
.breadcrumb>li+li:before {
	color: white;
	padding: 0 0 0 4px;
}
/* Needed in Bootstrap 3 to vertically align menu better. */
ul.breadcrumb {
	margin: 14px 0 0;
}
/* Properly re-space heading one inside the title header block, broken when Bootstrap 3 was introduced. */
.title h1 {
	margin: 12px 0;
}
/* We've removed an empty p-tag from original theme used to add spacing after icon, adding it to heading instead. */
.services .center h4 {
	margin-top: 10px;
}
/* The transparent button inside the slider is too small in Bootstrap 3, increase its size. */
.sl-slider-wrapper .sl-slide-inner .btn-large {
	font-size: 20px;
}
/* Part button adds button that are too small in Bootstrap 3, unless this font-change is applied. */
.button .btn-large {
  font-size: 20px;
}
/* Needed for allowing headings to be written in any case in config. */
#bottom h4 {
	text-transform: uppercase;
}
/* In our app, one can add only link (no preview) for a portfolio item, then the design doesn't properly center this link. */
ul.gallery li .preview .links {
	text-align: center;
}
/* Images float over the edges of each box, stop that or phablets will look ugly. */
.portfolio .gallery .preview img {
	max-width: 100%;
	width: 100%;
}
/* Left side padding on the ul element makes the entire list of portfolio items not centered. Reset to Bootstrap defaults. */
.portfolio .gallery {
	padding: 0 15px;
}
/* Spacing on phablets for portfolio gallery. */
ul.gallery li .desc {
	margin: 15px 0;
    text-align: center;
}
ul.gallery li .preview {
	margin: 0;
}
ul.gallery li {
	padding: 10px;
}
/* Modal images */
.portfolio .modal .modal-body img {
	width: 100%;
	max-height: 400px;
}
/* Close button for modal images. */
.portfolio .modal .close {
	opacity: 1;
	text-shadow: none;
	background-color: transparent;
}
	.portfolio .modal .modal-close {
		color: #3b4149;
		right: -8px;
		top: -8px;
		z-index: 2;
		font-size: 1.2em;
		background-color: white;
		border-radius: 50%;
		padding: 6px;
		overflow: hidden;
		width: auto;
		height: auto;
	}/*
	.portfolio .modal .icon-remove {
		background-color: transparent;
	}*/
.layout-col-1 section {
	padding-bottom: 50px;
}
/* Footer looks odd with it's margins on phablets unless the paddings are adjusted. */
#bottom {
	padding: 50px 0 30px 0;
}
	#bottom .col-md-3,
	#bottom .col-md-6 {
		padding-bottom: 20px;
	}

/* Old theme CSS and new bootstrap doesn't color hover in menu sub levels properly. */
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
	color: #ffffff;
}
/* Old theme doesn't color "in-path" class, but we want to add that feature. */
header.navbar .nav > li.in-path > a,
header.navbar .nav > li.in-path > a:hover {
	background: transparent;
	color: #dd143b;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

/* Nav toggler (small screens) */
.navbar-default  .navbar-toggle {
	border: none;
}
.navbar-default .navbar-toggle .icon-bar {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
    display: block;
}
/* Rotate first bar */
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(1) {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
    opacity: 0;
}
/* Rotate last bar */
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}
/* Fix issues with too big brand images. */
.navbar-default .navbar-brand {
	height: auto;
	padding: 0 15px; /* As all other elements in Bootstrap */
}
.navbar-default .navbar-brand img {
    max-width: 220px;
    max-height: 80px;
}
@media (max-width: 768px) {
	.navbar-default .navbar-brand {
		padding: 0;
	}
	.navbar-default .navbar-toggle {
		margin-right: 0;
	}
}

.navbar-default {
    background-color: #f8f8f8;
    border-color: #dd143b;
}
.navbar-default .navbar-nav > .open > a:hover{
    background-color: #fd871b;
    color: #FFFFFF;
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 3px;
}

/* Replace the hard coded .gap elements used in original theme. Only CSS needed! Also fixes improved design on smaller screens. */
#services .row {
	margin-bottom: 50px;
}
#services .row:last-child {
	margin-bottom: 0px;
}
@media (max-width: 992px) {
	#services .row {
		margin-bottom: 0px;
	}
	#services .col-md-4 {
		padding-bottom: 2em;
	}
}

/* Articles - list */
.p_article-list {
	padding: 0;
}
.p_article-list .article-list {
	list-style-type: none;
	padding: 30px 0 0 0;
	margin: 0;
}
	.p_article-list .article-list li,
	.p_article-list .media-body {
		padding: 1rem;
		transition: background-color 300ms linear;
	}
	.p_article-list .article-list li:hover,
	.p_article-list .media-body:hover {
		background-color: hsla(41.9, 32.5%, 68%, 0.4);
	}
		.p_article-list .article-list p {
			margin: 0;
		}
		.p_article-list .article-list a,
		.p_article-list .media-body a {
			color: #34495e;
		}
			.p_article-list .article-list a:hover,
			.p_article-list .media-body a:hover {
				color: #34495e;
			}

/* Remove link around partner logos, updating CSS to reflect new DOM. */
.thumbnail .img-circle {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Articles - Single view */
.p_article-show {
	padding: 2em 0;
}
	.p_article-show .preface {
		font-weight: 400;
		font-size: 1.9rem;
		font-style: italic;
		margin-bottom: 2rem;
	}
	.p_article-show .header-image {
		margin-bottom: 2rem;
		max-width: 100%;
	}
	.p_article-show .published,
	.p_article-show .author {
		padding-top: 20px;
		font-style: italic;
	}
	.p_article-show .author {
		padding-top: 0;
	}

/* Employee list has no bottom spacing */
#about-us {
	padding-bottom: 50px;
}
/* Make sure employee profile pictures doesn't flow over the containing box */
#about-us .box img {
	max-width: 100%;
	min-width: 100%;
}

/* Bottom spacing on front page */
#services, .portfolio, #clients {
	padding-bottom: 50px;
}

/* Remove gap element */
.portfolio .center {
	padding-bottom: 20px;
}

/* Some things are just not meant for small screens. Like stacked elements separated with a light hr. */
@media (max-width: 992px) {
	.services hr {
		display: none;
	}
	.services .col-md-4 {
		padding-bottom: 20px;
	}
}

#myCarousel .col-xs-2 {
    width: 200px;
}

@media (max-width: 400px) {
    #myCarousel .col-xs-2 {
        width: 160px;
    }
}

.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
}
@media (min-width: 768px) {
    .lead {
        font-size: 17px;
    }
}

.list-group-item.active,[class*='-info'] {
    background: #fd871b;
    color: #FFFFFF;
    border-style:none;
}
.list-group-item.active:hover,[class*='-info'] {
    background: #fd871b;
    color: #FFFFFF;
    border-style:none;
}
a.list-group-item.active,[class*='-info'] {
    background: #fd871b;
    color: #FFFFFF;
    border-style:none;
}