/* CSS Document */

body {height:100%;color:#bbbdc0; font-family:Garamond, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;background: #f0f1f1 url(../images/background.png) -50px 0 no-repeat;
}
body.portfolio {background: #f0f1f1 url(../images/background.png) -50px 200px no-repeat;}
h1 {margin:5px 0;padding:0; text-align:center;color:#696c71;}
h2 {text-align:center;color:#696c71;}
.textRow {padding-left:100px;}
.titleRow  {padding-left:100px;padding-top:80px;}
img {max-width:100%;}
#menu-toggle {position:fixed; top:15px; left:20px;z-index:5000;}
.logoMargin {margin-top:18%}
p {color:#696c71;line-height:35px;font-size:16px;}
.copyText {margin-top:25%;}
.copyText2 {margin-top:80px;}
.modal-body {background-color:#f0f1f1;text-align:center;}
.modal-footer {background-color:#e6e7e8; border:none;}
		.animated {
            
			-webkit-animation-duration: 15s;animation-duration: 15s;
            -webkit-animation-fill-mode: both;animation-fill-mode: both;
         }
         
         @-webkit-keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
         
         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
         
         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }

.dropdown-menu {
  left: 50%;
  right: auto;
  text-align: center;
  transform: translate(-50%, 0);
  background-color:#e6e7e8;
  letter-spacing: 3px;	
  font-size:12px;
}

.btn-primary {background-color:#e6e7e8; color:#747575;border:#f9f9f9 2px solid;outline:0}
.btn-primary:hover {background-color:#9a9fa2;border:#f9f9f9 2px solid;outline:0}
.btn-primary.focus, .btn-primary:focus {
    border:#f9f9f9 2px solid;
  	background-color:#747575;
	color:#FFFFFF;outline:0;
}
.btn-primary.click, .btn-primary:click {outline:0;}

.container-fixed {
  bottom: 0;
  position: fixed;
  left: 0px;
  right: 0;
  top: 0;
  overflow-y:auto;
  overflow-x:hidden;
}
.container-fluid {
  overflow-x:hidden;
}

.container-fixed .col {
  height: 100%;
  position:relative;
  z-index:1;
  overflow:hidden;
}



.row-xs-12 { height: 100%; }
.row-xs-11 { height: 91.66666666666666%; }
.row-xs-10 { height: 83.33333333333334%; }
.row-xs-9 { height: 75%; }
.row-xs-8 { height: 66.66666666666666%; }
.row-xs-7 { height: 58.333333333333336%; }
.row-xs-6 { height: 50%; }
.row-xs-5 { height: 41.66666666666667%;}
.row-xs-4 { height: 33.33333333333333%;}
.row-xs-3 { height: 25%; }
.row-xs-2 { height: 16.666666666666664%; }
.row-xs-1 { height: 8.333333333333332%; }



/**
 * Use this wrapper only for demo purposes
 * So you can show the items outside the wrapper
 */

.wrapper2 {
  width: 100%;
  max-width:500px;
  position: relative;
  overflow: hidden;
  margin: 30px auto;
}
.wrapper {
  width: 100%;
  max-width:640px;
  position: relative;
  overflow: hidden;
  margin: 30px auto;
}
.wrapper--demo { overflow: visible; }

.wrapper--demo:after,
.wrapper--demo:before {
  content: "";
  position: absolute;
  width: 800px;
  height: 100%;
  top: 0;
  left: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 2;
}

.wrapper--demo:before { left: -800px; }

.carousel {
  width: 100%;
  position: relative;
}

.carousel .carousel__content {
  width: auto;
  position: relative;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transition: translate3d(0, 0, 0);
}

.carousel .carousel__content .item {
  display: block;
  float: left;
  width: 100%;
  position: relative;
}

.carousel .carousel__content .item .title {
  position: absolute;
  top: 50%;
  left: 0;
  margin: -33px 0 0 0;
  padding: 0;
  font-size: 3rem;
  width: 100%;
  text-align: center;
 letter-spacing: .3rem;
  color: #FFF;
}

.carousel .carousel__content .item .title--sub {
  margin-top: 20px;
  font-size: 1.2em;
  opacity: .5;
}

.carousel .carousel__content .item img {
  width: 100%;
  max-width: 100%;
  display: block;
}

.carousel .carousel__nav {
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -17px;
  left: 0;
  z-index: 1;
}

.carousel .carousel__nav .nav {
  position: absolute;
  top: 0;
  color:#696c71;
  background: #f0f1f1;
  padding: 8px 12px;
  font-weight: bold;
  text-decoration: none;
  opacity: .8; 
  font-size: 12px;
  transition: padding .25s ease;
}

.carousel .carousel__nav .nav:hover { padding: 8px 20px; }

.carousel .carousel__nav .nav--left { border-radius: 0px 3px 3px 0px; }

.carousel .carousel__nav .nav--right {
  right: 0;
  border-radius: 3px 0px 0px 3px;
}

@media(max-width:768px) {


.dropdown-menu {
  left: 50%;
  right: auto;
  text-align: center;
  transform: translate(-50%, 0);
  background-color:#e6e7e8;
  letter-spacing: 3px;	
  font-size:12px;
}

.copyText {margin-top:40px;}

.container-fixed .col {
  height: 100%;
  position:relative;
  z-index:1;
}


.wrapper {
  max-width:100%;
}

h2.text-left {margin-top:10px;}

.row-xs-12 { height: 100%; }
.row-xs-11 { height: 91.66666666666666%; }
.row-xs-10 { height: 83.33333333333334%; }
.row-xs-9 { height: 75%; }
.row-xs-8 { height: 66.66666666666666%; }
.row-xs-7 { height: 58.333333333333336%; }
.row-xs-6 { height: 50%; }
.row-xs-5 { height: 41.66666666666667%;}
.row-xs-4 { height: 33.33333333333333%;}
.row-xs-3 { height: 25%; }
.row-xs-2 { height: 16.666666666666664%; }
.row-xs-1 { height: 8.333333333333332%; }
}


@media (max-device-width: 480px)  {
	
.copyText {margin-top:40px;}

.textRow {padding-left:30px;}
.titleRow  {padding-left:30px;padding-top:30px;}

.row-xs-12 { height: 100%; }
.row-xs-11 { height: 91.66666666666666%; }
.row-xs-10 { height: 83.33333333333334%; }
.row-xs-9 { height: 75%; }
.row-xs-8 { height: 66.66666666666666%; }
.row-xs-7 { height: 58.333333333333336%; }
.row-xs-6 { height: 50%; }
.row-xs-5 { height: 41.66666666666667%;}
.row-xs-4 { height: 33.33333333333333%;}
.row-xs-3 { height: 25%; }
.row-xs-2 { height: 16.666666666666664%; }
.row-xs-1 { height: 8.333333333333332%; }

	
.container-fixed .col img {
    position: absolute;
    margin: auto; 
    min-height: 100%;
    min-width: 100%;
	max-width: 100%;

    /* For the following settings we set 100%, but it can be higher if needed 
    See the answer's update */
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
}
}

@media only screen and (max-device-width: 480px)  {
	
.titleText {text-align:left;}
.copyText {margin-top:40px;padding-right:20px;}
.copyText2 {margin-top:40px;}

.textRow {padding-left:30px;padding-right:20px;}
.titleRow  {padding-left:30px;padding-top:30px;}

.row-xs-12 { height: 100%; }
.row-xs-11 { height: 91.66666666666666%; }
.row-xs-10 { height: 83.33333333333334%; }
.row-xs-9 { height: 75%; }
.row-xs-8 { height: 66.66666666666666%; }
.row-xs-7 { height: 58.333333333333336%; }
.row-xs-6 { height: 50%; }
.row-xs-5 { height: 41.66666666666667%;}
.row-xs-4 { height: 33.33333333333333%;}
.row-xs-3 { height: 25%; }
.row-xs-2 { height: 16.666666666666664%; }
.row-xs-1 { height: 8.333333333333332%; }

.noPad {padding:0;margin-top:-2px;}

}