html,
body {
    height: 100%;
    background-color: #fff;
    font-family: 'Slabo 13px', sans-serif;
    font-weight: 100;
    text-align: center;
    font-size: 20px;
}


/* Links */

a {
    color: #a24338
}

a:focus,
a:hover {
    color: #652c25
}

.darkbg a {
    color: #ffa236;
}

.darkbg a:hover, .darkbg:focus {color: #ffc480;}

/* Images */

img {max-width: 100%; }


/* Extra markup and styles for table-esque vertical and horizontal centering */

.site-wrapper {
    display: table;
    width: 100%;
    height: 100%;
    /* For at least Firefox */
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
    background-image: url(../images/header.jpg);
    background-attachment: fixed;
    background-repeat: none;
    background-size: cover;
}

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
      .site-wrapper { background-attachment: scroll; }

}

.site-wrapper-inner {
    display: table-cell;
    vertical-align: middle;
}

.cover-container {
    margin-right: auto;
    margin-left: auto;
}


.grid-container {
    padding: 50px;
}

#services,
#contactus {
    background-color: #a24338;
    color: white;
    padding: 100px 0;
}

form {
    padding: 50px 0;
}

.form-group {
    text-align: left;
}


/* NAVBAR */

.navbar {
    background-color: #fff;
}

.navbar-toggle {
    background-color: #a24338;
}

.navbar-toggle .icon-bar {
    background-color: #fff;
}

.nav svg {
    margin: -5px 7px;
    fill: #444;
}

/*
 * Cover
 */

.cover {
    padding: 0 20px;
}

.cover .btn-lg {
    padding: 10px 20px;
    font-weight: bold;
}


/*
 * Affix and center
 */

@media (min-width: 768px) {
    /* Start the vertical centering */
    .site-wrapper-inner {
        vertical-align: middle;
    }
    /* Handle the widths */
    .cover-container {
        width: 100%;
        /* Must be percentage or pixels for horizontal alignment */
    }
}

@media (min-width: 992px) {
    .cover-container {
        width: 700px;
    }
}

/* MEDIA BOXES */

		/* hide no more entries button */
		.media-boxes-no-more-entries{
			display: none;
		}

		/* make your own style of the filter */
		.filters-container{
			margin-bottom: 20px;
		}
		.custom-filter{
			padding: 0;
			text-align: right;
		}
		.custom-filter li{
			list-style: none;
			display: inline-block;
			margin-left: 18px;
			font-size: 12px;
		}
		.custom-filter li a{
			color: #999;
			text-decoration: none;
		}
		.custom-filter li a:hover{
			color: #333;
		}
		.custom-filter li a.selected{
			color: #D1474C !important;
		}

		/* Set the style of the thumbnail overlay items */
		.media-box-title{
			color: #fff;
			font-size: 18px;
			margin-bottom: 5px;
			text-transform: uppercase;
		    letter-spacing: 2px;
		    line-height: 18px;
		}
		.media-box-date{
			color: #F2F2F2;
			font-size: 16px;
		}

		/* Remove box shadow and border-radius from the media boxes */
		.media-box-container{
			  -webkit-border-radius: 0px;
			  	 -moz-border-radius: 0px;
			  		  border-radius: 0px;

			  -webkit-box-shadow: none;
			  	 -moz-box-shadow: none;
			  	   -o-box-shadow: none;
			      -ms-box-shadow: none;
			  		  box-shadow: none;
		}

		/* thumbnail overlay background */

		/* thumbnail overlay background (in the first grid change the initial background) */
		#grid .thumbnail-overlay{
    		background-color: rgba(0,0,0, 0);
		}

		/* hover effect on the thumbnail-overlay */
		.thumbnail-overlay:hover{
    		background-color: rgba(0,0,0, .60) !important;
		}
		
		/* hover effect on the image */
		.media-box-image img{
		    -webkit-transition: all 0.6s ease-in-out;
		       -moz-transition: all 0.6s ease-in-out;
		         -o-transition: all 0.6s ease-in-out;
		        -ms-transition: all 0.6s ease-in-out;
		            transition: all 0.6s ease-in-out;

		    -webkit-transform-origin: bottom left;
		       -moz-transform-origin: bottom left;
		         -o-transform-origin: bottom left;
		        -ms-transform-origin: bottom left;
		            transform-origin: bottom left;
		}
		.media-box-image:hover img{
		    -webkit-transform: scale(1.2) translate(-20px);
		       -moz-transform: scale(1.2) translate(-20px);
		         -o-transform: scale(1.2) translate(-20px);
		        -ms-transform: scale(1.2) translate(-20px);
		            transform: scale(1.2) translate(-20px);
		
		}

		.thumbnail-overlay .media-box-title{
			font-size: 16px;
		}

		.thumbnail-overlay .media-box-date{
			font-style: italic;
			font-size: 12px;
		}

/* CONTACT */

#contactinfo {
    font-size: 1em;
}

#contactinfo pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    line-height: 1.42857143;
    color: #fff;
    word-break: break-all;
    word-wrap: break-word;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    font-family: 'Slabo 13px', serif;
    text-align: center;
}

#contactinfo .glyphicon {
    display: block;
    font-size: 1.8em;
    padding: 15px;
}

#contactinfo a {
    color: #ccc;
}

#contactinfo a:hover,
#contactinfo a:focus{
    color: #fff;
    text-decoration: none
}

#contactus .btn {
    background-color: #444;
    color: white;
        padding: 10px 35px;
}

#contactus .btn:hover,
#contactus .btn:focus {
    background-color: #fff;
    color: black;
}

/* Flexslider Pop-up */

   .white-popup {
          position: relative;
          background: transparent;
          padding: 20px;
          max-width: 800px;
          height: 60vh;
          margin: 20px auto;
        border-radius: 15px;
        }

.flexslider {overflow: hidden;}

		.thumbnail-overlay .media-box-title{
			font-weight: 100 !important;
            color: #fff !important;
		}

        /* style of the content */
        .media-box-content .media-box-title{
            font-weight: 100 !important;
            text-align: center;
        }

#carousel {
    height: 90px;
    overflow: hidden;
}

.flexslider .slides li img.portrait {
max-height: 70vh;
width: auto;
    margin: auto;}


/* Projects carousel */


/* Container styles */
.scrolling-text-container {
    border-radius: 4px;
    overflow: hidden;
}

/* Inner container styles */
.scrolling-text-inner {
    display: flex;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 600;
    padding: 8px 0;
}

/* Text styles */
.scrolling-text {
    display: flex;
}

.scrolling-text-item {
    padding: 0 30px;
}

/* Apply the animation to the text items */
.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

/* Pause the animation when a user hovers over it */
.scrolling-text-container:hover .scrolling-text-inner>div {
    animation-play-state: paused;
}

/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-70%);
    }
}
/*
@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}
*/