@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,600,700,300,200&subset=latin,latin-ext);
@font-face{ 
	font-family:'frustro_canelloni-webfont';
	src: url('../fonts/Frustro/frustro_canelloni-webfont.eot');
	src: url('../fonts/Frustro/frustro_canelloni-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/Frustro/frustro_canelloni-webfont.woff') format('woff'),
	     url('../fonts/Frustro/frustro_canelloni-webfont.ttf') format('truetype'),
	     url('../fonts/Frustro/frustro_canelloni-webfont.svg#webfont') format('svg');
}

body {
    width: 100%;
    height: 100%;
	font-family: 'Titillium Web', sans-serif;
	background-color: #fff;
	color:#384C5B;
}

html {
    width: 100%;
    height: 100%;
}

h1, .h1 {
    color:#7A8FA0;
}

h3, .h3 {
    color:#405668;
}

h3 span {
    color:#384C5B;
}

p {
    font-size:16px;
}

a {
	color: #405668;
	text-decoration: none;
}

a:hover,
a:focus {
	color: #268f99;
	text-decoration: none;
}

.light {
    font-weight:200;
	padding-left:10px;
}

.lighter {
    font-weight:300;
	
}

hr.atl {
    
    opacity:0;

}

hr.flc {
    width:36%;
	border:4px solid #6888A3;
	opacity:0.5;
}

.logo {
    font-family: "frustro_canelloni-webfont";
	color:#fff;
	font-size:22px;
	padding-top:0;
	margin-top:0;
	margin-bottom:0px;
}

.logo2 {
    font-family: "Titillium Web";
	color:#fff;
	font-size:11px;
	margin-top:0;
}

.fill {
	width:100%;
	height:100%;
	background-position: center;
	background-size: cover;
}

.also {
	bottom: 0px;
	padding-top: 200px;
	margin-bottom: 0;
	font-size:36px;
}

.bg1 {
     background-size:cover;
	-webkit-background-size: 1920px 1200px;
	-moz-background-size:1920px 1200px;
		
}

.bg2 {
    
	background-size:cover;
	-webkit-background-size: cover;
	-moz-background-size:cover;
	background-attachment: fixed;
}

@media(min-width:480px) {
.bg2 {
	width:100%;
	
   }
}

/* =============================================================
     NAVBAR
 ============================================================ */
.navbar-default {
  	background-color: #f8f8f8;
  	border-color: #e7e7e7; /* border-color: #e7e7e7; */
}

.navbar .glyphicon-home {
  	padding-bottom:5px;
}
 
.navbar-default .navbar-nav > li > a {
	font-family: 'Oswald', sans-serif;
	color:#86939e;
	font-weight: 400 !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  	color:#268F99;
  	background-color: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  	color:#384c5b;
  	background-color: transparent;
}

.navbar-brand {
    font-family: "frustro_canelloni-webfont";	
}

.navbar-brand span {
    font-family: "frustro_canelloni-webfont";	
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  	color: #405668;
  	background-color: transparent;
}

.dropdown-menu {
	position: absolute;
	top: 101%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 100%;
	padding: 0 0 5px 0;
	margin: 2px 0 0;
	font-family: "Oswald";
	font-size: 15px;
	list-style: none;
	background-color: rgba(255, 255, 255, .7);
	border-radius: 0px;
   -webkit-box-shadow: 0 8px 10px rgba(0, 0, 0, 0.155);
           box-shadow: 0 8px 10px rgba(0, 0, 0, 0.155);
    background-clip: padding-box;
	border-top-width: 1px;
	border-top-color: transparent;
	border-bottom: 0;
}

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color:#86939e;
    white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color:#268F99;
    text-decoration: none;
    background-color: transparent;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color:#384c5b;
    text-decoration: none;
    background-color: transparent;
    outline: 0;
}

@media(min-width:767px) {
    .navbar {
        padding: 40px 0 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
		background-color: rgba(255, 255, 255, .7);
    }
	
	.navbar .navbar-brand {
	    font-size: 500%;
		color:#384C5B;
		margin-top: -25px;
		-webkit-transition: all .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: all .5s ease-in-out,padding .5s ease-in-out;
        transition: all .5s ease-in-out,padding .5s ease-in-out;
	}

    .top-nav-collapse {
        padding: 0;
		background-color: rgba(255, 255, 255, 1.0);
    }
	
	.top-nav-collapse .navbar-brand {
	    font-size: 150%;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	
	.top-nav-collapse .navbar-brand span {
        visibility:hidden;
    }
}

/* =============================================================
    SECTIONS
 ============================================================ */

section {
    width:100%;
}

.intro-section {
    height: 100%;
    padding-top: 0px;
    text-align: center;
    background-color: #fff;

	border-bottom: 0px solid #fff;
}

.about-section {
    min-height:100%;
	max-height:auto;
    padding-top: 100px;
	padding-bottom: 10px;
    text-align: center;
    background: #fefefe;
	border-top: 4px solid #fff;
	border-bottom: 20px solid #A8AAA0;
}

.services-section {
	min-height:auto;
	max-height:auto;
    padding-top: 80px;
    text-align: center;
    background: #fefefe;
	border-top: 20px solid #fff;
	border-bottom: 0px solid #fff;
}

.rendering-section {
    height:500px;
    padding-top:93px;
	padding-bottom:0px;
	padding-left:0px;
	padding-right:0px;
	margin-top:0;
	margin-bottom:0px;
    text-align: center;
    background: transparent;
	border-top: 0px solid transparent;
	border-bottom: 20px solid #A8AAA0;
}

.modell-section {
    height: auto;
	width:100%;
    padding-top: 30px;
	padding-bottom:30px;
	padding-left:0px;
	padding-right:0px;
	margin-top:0;
    text-align: center;
    background: #fefefe;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}

.contact-section {
    height: auto;
    padding-top: 80px;
    text-align: center;
    background: #fefefe;
	border-top: 20px solid #A8AAA0;
	border-bottom: 0px solid #fff;
}

.box {
	height:500px;
	width:100%;
	background-attachment: fixed;
	margin: 0;
	padding: 50px 0 0 0;
	border-top: 20px solid #A8AAA0;
	border-bottom: 0px solid #A8AAA0;
}

footer {
    margin-top:40px;
	background:#8A939B;
	color:#fff;
	font-size:12px;	
}

#modell {
     padding:0px 15px;
}

@media (max-width: 768px) {
.intro-section {
    height: 100%;
}

.about-section {
    height: auto;
    max-height: auto;
}

.services-section {
	height:auto;
}

.rendering-section {
    height: 500px;
	top: auto;
}

.box {
    height:500px;	
	width:100%;
}

.modell-section {
    height: auto;
    max-height: auto;
}

.contact-section {
    height: auto;
    max-height: auto;
}

#modell.container  {
    padding:0;
}

h3.captionkat {
    font-size:14px;
}

#modell {
     padding:0px 0px;
  }
}

@media (max-width: 480px) {
.services-section {
	height:auto;
}

.intro-section {
    height: 100%;
    margin-top: 50px;
    text-align: center;
    background-color: #fff;
	border-bottom: 0px solid #fff;
}

.modell-section {
	border-top: 0px solid transparent;
	border-bottom: 0px solid transparent;
}
  
.rendering-section2 {
    margin-top: 50px;
	padding-top: 50px;
	border-top: 0px solid transparent;
	border-bottom: 0px solid transparent;
}

.box2 {
    background-attachment: scroll;
	background-size: 50% 50%;
	border-top: 0px solid transparent;
	border-bottom: 0px solid transparent;
  }
}

/* =============================================================
     CAROUSEL 1
 ============================================================ */

.transition-timer-carousel {
    margin-top: 0px;
    height: 97.5%;
}

.carousel-inner {
	height:100%;
}

.carousel .item {
   height: 100%;   
}

.carousel .item img {
    width: 100%; /*img width*/

}

.carousel .carousel-control {
    opacity:0.1;
}

.carousel .carousel-control:hover {
    opacity:0.9;
}

.carousel-indicators {
	bottom: -20px;
	left:0;
	width:100%;
	margin:0;
	padding:0;
	background-color:#A8AAA0;
}

.carousel-indicators li {
    border-radius:0;
	background:#fff;
	 width: 8px;
     height: 8px;
     margin-bottom:2px;
}

.carousel-indicators .active {
	border-radius:15px;
	background:#fff;
	border-color:#fff;
	width: 10px;
    height: 10px;
	margin-bottom:1px;
}

.transition-timer-carousel .carousel-caption {
   background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,76,76,0)), color-stop(12%, rgba(89,89,89,0)), color-stop(35%, rgba(102,102,102,0.2)), color-stop(100%, rgba(19,19,19,0.35)));
background: -webkit-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(89,89,89,0) 12%, rgba(102,102,102,0.2) 35%, rgba(19,19,19,0.35) 100%);
background: -o-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(89,89,89,0) 12%, rgba(102,102,102,0.2) 35%, rgba(19,19,19,0.35) 100%);
background: -ms-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(89,89,89,0) 12%, rgba(102,102,102,0.2) 35%, rgba(19,19,19,0.35) 100%);
background: linear-gradient(to bottom, rgba(76,76,76,0) 0%, rgba(89,89,89,0) 12%, rgba(102,102,102,0.2) 35%, rgba(19,19,19,0.35) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );
	width: 100%;
	left: 0px;
	right: 0px;
	bottom: 0px;
	text-align: right;
	padding-top: 5px;
	padding-left: 15%;
	padding-right: 7%;
	text-shadow:none;
}

.transition-timer-carousel .carousel-caption .carousel-caption-header {
	margin-top: 10px;
	font-size: 24px;
}

.transition-timer-carousel .carousel-control {
	z-index: 11;
}

.transition-timer-carousel .transition-timer-carousel-progress-bar {
    height: 3px;
    background-color: #fff;
    width: 0%;
    margin: -5px 0px 0px 0px;
    border: none;
    z-index: 11;
    position: relative;
}

.transition-timer-carousel .transition-timer-carousel-progress-bar.animate{
    -webkit-transition: width 4.25s linear;
	-moz-transition: width 4.25s linear;
	-o-transition: width 4.25s linear;
	transition: width 4.25s linear;
}

/* =============================================================
     CAROUSEL FADE
 ============================================================ */
.carousel-fade .item {
	-webkit-transition: opacity 2s; 
	-moz-transition: opacity 2s; 
	-ms-transition: opacity 2s; 
	-o-transition: opacity 2s; 
	transition: opacity 2s;
}
	.carousel-fade .active.left {
	left:0;opacity:0;z-index:2;
}
	.carousel-fade .next {
	left:0;opacity:1;z-index:1;
}

/* =============================================================
     CAROUSEL 2
 ============================================================ */
#slider {
    margin: 0;
	padding:30px 0 0 0;
	width:100%;
}

#thCarousel2 .carousel-control.left,
#thCarousel2 .carousel-control.right {
	background-image:none;
	color:#333333;
	opacity:0.5;
    width:1%;
	bottom:30%;
}

#thCarousel2 .carousel-control.left {
    left:-25px;
}
#thCarousel2 .carousel-control.right {
    right:-25px;
}

#thCarousel2 .carousel-control.left, {
 
}
#thCarousel2 .carousel-control:hover {
    opacity:0.9;
}

#carousel-bounding-box {
   width:100%;  /*!!!!!!!!!!!!!!!!!!!!*/
   height:auto;
}

.carousel-control.right,.carousel-control.left {	
    background-image:none;
}

.item > a {
	display:block;
  	float:left;
}
/* =============================================================
   Static Caption
============================================================ */
.main-text {
    position: absolute;
	top:0;
    margin-top:100px;  /*!!!!!!!!!!!!!!!!*/
    width: 96.66666666666666%;
    color: #fff;
	z-index:8888;
}
.main-text2 {
    position: absolute;
	bottom:0;
    margin-bottom:20px;  /*!!!!!!!!!!!!!!!!*/
    width: 96.66666666666666%;
    font-family: "frustro_canelloni-webfont";
	color:#fff;
	font-size:20px;
	z-index:8887;
}
.static-headline {
    color: #fff;
}

@media (max-width: 768px) {
.main-text {
    position: absolute;
	top:0;
    margin-top:100px;  /*!!!!!!!!!!!!!!!!*/
    /*width: 96.66666666666666%;*/
    color: #fff;
	z-index:8888;
   }
.main-text2 {
	bottom:0;
    margin-bottom:15px;
	font-size:16px;

}
   .transition-timer-carousel {
    	margin-top: -100px;
   }
   
   #thCarousel2 .carousel-control.left,
   #thCarousel2 .carousel-control.right {
		bottom:30%;
   }
   
}

@media (max-width: 480px) {

.main-text {
    position: absolute;
	top:0;
    margin-top:100px;  /*!!!!!!!!!!!!!!!!*/
    /*width: 96.66666666666666%;*/
    color: #fff;
	z-index:8888;
}
.main-text2 {
    margin-right:-10px;
	margin-bottom:10px;
	font-size:10px;
}
.transition-timer-carousel {
    margin-top: -100px;
	
}
.carousel .item img {
    width: 100%;
	
}
.carousel-caption {
    top:80%;
	font-size:16px;
	padding:0;
}
.carousel-caption h2{
    top:60%;
	font-size:18px;
	padding:0;
	margin-top:8px;
}
#thCarousel2 .carousel-control.left,
#thCarousel2 .carousel-control.right {
	bottom:70%;
  }

}


.captionkat {
  position: absolute;
  top: 0;
  height: 40px;
  background: rgba(0, 0, 0, 0.3);
  left: 0;
  right: 0;
  font-size: 17px;
  color:#FFFFFF;
  padding: 10px;
  margin: 0px 0 0 0;
  text-transform: uppercase;
  text-align: center;  
}

/* =============================================================
 PORTFOLIO SECTION STYLES
 ============================================================ */

#portfolio2-div {
  	min-width:480px;
  	min-height:700px;

}

#portfolio-div {
  	min-width:90%;
	max-width:100%;
  	min-height:700px;

}

.categories,
.categories2,
.categories3 {
    background-color: transparent;
	margin:0;
    border: 0px;
}

.categories a:hover,
.categories2 a:hover,
.categories3 a:hover {
    background-color: transparent;
}

.categories a.active,
.categories2 a.active,
.categories3 a.active {
    background-color: transparent;
    border: 0px;
	color:#384c5b;
}

.btn:active,
.btn.active {
    background-image: none;
	background-color: transparent;
	borde: 0;
    outline: 0;
    -webkit-box-shadow: none;
          box-shadow: none;
}

.btn {
    borde: 0;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}

.btn-default {
    color:#86939e;
    background-color: transparent;
    border: 0px;
    font-family:  'Oswald', sans-serif;
    font-weight:400;
    font-size:14px;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
    color:#268F99;
    background-color: transparent;
    border: 0px;
}
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
    background-image: none;
    background-color: transparent;
    border: 0px;
}

.btn-success {
    color:#fff;
    background-color: transparent;
    border: 0px;
    font-family:  'Oswald', sans-serif;
    font-weight:400;
    font-size:14px;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
    color:#268F99;
    background-color: transparent;
    border: 0px;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
    background-image: none;
    background-color: transparent;
    border: 0px;
}

.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

#works .work-wrapper {
    border: 2px solid #000;
    padding: 2px;
    margin: 5px 5px 10px 5px;
}

.work-wrapper img {
    border: 0px solid #000;
    padding: 2px;
    margin: 5px 0px 20px 0px;

    filter: none; /* FOR IE6-9 */
    -webkit-filter: grayscale(0); /* FOR Google Chrome, Safari 6+ and  Opera 15+ */
    opacity: 1;
}

.work-wrapper img:hover {
	filter: gray; /* FOR IE6-9 */
    -webkit-filter: grayscale(1); /* FOR Google Chrome, Safari 6+ and  Opera 15+ */
    opacity: 0.8;
    }

#works img {
    margin-bottom:20px;
    filter: gray; /* FOR IE6-9 */
    -webkit-filter: grayscale(1); /* FOR Google Chrome, Safari 6+ and  Opera 15+ */
    opacity: 0.8;
}

.pad-bottom {
    padding-top: 10px;
    padding-bottom: 10px;
}

.set-bk-clr {
    background-color: #eee;
}

.clr-set {
    color: #eee;
}

.f-big {
    font-size: 40px;
    font-weight: 900;
}

.set-bk-clr:hover {
    background-color: rgba(0, 0, 0, 0.67);
}

/* ============================================================= */

#back-top {
	position: fixed;
	bottom: -18px; /* bottom: 40px; */
	right:15px;
	z-index: 9999;
}
#back-top a {
	width: 45px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(0,0,0,.4);
	opacity:0.6; 
	z-index: 9999;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;
}
#back-top a:hover {
	color: #384C5B;
	width: 45px;
}

#back-top span {
	width: 45px;
	height: 35px;
	display: block;
	margin-bottom: 7px;
	background: rgba(56,76,91,.4) url(../images/up-arrow.png) no-repeat center center;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;
}
#back-top a:hover span {
	background-color: rgba(56,76,91,.95);

}

.thumbnail {
    padding:0;
}
.thumbs {
   margin-top:45px;
   padding:10px;
}
.nopadding {
    padding:0;
}
.imgpadding {
    padding:15px;
}
@media (max-width: 768px) {   
  .imgpadding {
    padding:10px;
	}

}

@media (max-width: 480px) {
.imgpadding {
    padding:5px; 
}

}
.bal {
	margin-bottom:30px;
	margin-right:0;
	margin-left:0px;
	padding-top:0px;
	padding-bottom:30px;
}

.jobb {
	margin-bottom:30px;
	margin-right:0;
	margin-left:0;
	padding-top:0px;
	padding-bottom:30px;
}

.form-horizontal {
    padding:25px 0 0 0;
}
.form-controll, .commentform {
    border-radius:0;
}
.input-group[class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
	border-radius:0;
 }
 .popover   {
    background-color: #268f99;
    color: #fff;
    width: 100px;
	text-align:center;
}
.popover.right .arrow:after {
    border-right-color: #268f99;
}

.label-default {
    background-color: transparent;
    color: #242d3d;
	font-size:14px;
	font-weight:300;
	line-height:10px;
    width: 150px;
	padding:0px;
	margin:0px;
}

.well {
	border-radius:0;
	border-color:#eee;
}