@charset "UTF-8";
/* CSS Document */

body {

	font-family: 'Open Sans', sans-serif;	
	margin: 0;
	padding: 0;
	border-top: 5px solid #bab3a5;
}
#b1 { background: rgba(0, 0, 0, 0) url("images/mountain-bg.jpg") repeat scroll top center / 140% auto; }
#b2 { background: rgba(0, 0, 0, 0) url("images/tupare-bg.jpg") repeat scroll top center / 140% auto; }
#b3 { background: rgba(0, 0, 0, 0) url("images/len-bg.jpg") repeat scroll top center / 140% auto; }

.txtWrapper {
    margin: 90px 25px 60px;
    width: 50%;
}
.wrapper {
    margin: auto;
    max-width: 880px;
}
h1 {
    color: #fff;
    font-size: 45px;
    font-weight: 900;
    line-height: 1em;
    margin: 0 0 35px 0;
    padding: 5px 0;
    text-transform: uppercase;
}
h2 {
    color: #333;
    font-size: 27px;
    line-height: 1.2em;
    margin: 0;
    padding: 5px 0;
}
h3 {
	padding: 5px 0;
	margin: 0;
	font-size: 18px;
	color: #fff;
	font-weight: 400;
}
ul {
	padding: 0;
	margin: 15px 15px 45px 15px;
	
}
li {
	list-style: circle;
	padding: 0;
		font-size: 13px;
	margin: 0;
	color: #333;
}
a.btn {
	border: 1px solid #333;	
	color: #333;
	padding: 20px;
	font-size: 13px;
	text-decoration: none;
}
a.btn:hover {
	border: 1px solid #333;	
	color: #fff;
	background: #333;
	padding: 20px;
	font-size: 13px;
	text-decoration: none;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

   .container, .container2 {
    float: left;
    height: 280px;
    margin: 0 19px;
    perspective: 800px;
    position: relative;
    width: 400px;
}

    #card {
      width: 100%;
      height: 100%;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }
	#card2 {
      width: 100%;
      height: 100%;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    .container:hover #card {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }
	.container2:hover #card2 {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }

    #card figure{
	background: rgba(0,0,0,.3);	
    margin: 0;
      width: 400px;
	    padding:120px 75px 0;
      height: 350px;
      display: block;
      line-height: 20px;
      text-align: left;
      font-weight: bold;
      font-size: 40px;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
			   
    }
	#card figure.back, #card2 figure.back {
		background: #FFF;
		padding-top: 30px;	
	}
	#card2 figure{
	background: rgba(0,0,0,.3);	
    margin: 0;
      width: 400px;
	   padding: 120px 75px 0;
      height: 350px;
      display: block;
      line-height: 20px;
      text-align: left;
      font-weight: bold;
      font-size: 40px;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
			 
    }

    #card .back {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }
	#card2 .back {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }
	/*.footer {
    background: #000 none repeat scroll 0 0;
    bottom: 0;
    display: block;
    float: left;
    margin: 0;
    position: absolute;
    width: 100%;
}*/
.footer {
    background: #000 none repeat scroll 0 0;
    display: block;
    float: left;
    margin: 200px 0 0;
    position: relative;
    width: 100%;
}
.footerInner {
    margin: auto;
    max-width: 880px;
    padding: 10px 0;
}
.footer p, .footer a {
	color: #fff;
	font-size: 12px;
}
}
================================================== */
@media only screen and (max-width: 959px) {
.footer {
    background: #000 none repeat scroll 0 0;
    bottom: 0;
    display: block;
    float: left;
    margin: 0;
    position: relative;
    width: 100%;
}


}
/* Tablet (Portrait)

}
/* Mobile (Portrait only)
================================================== */
@media only screen and (max-width: 860px) {
	.txtWrapper {
    margin: 10px 25px 60px;
    width: 90%;
}
.container, .container2 {
    float: left;
    height: 380px;
    margin: 0 ;
    perspective: 800px;
    position: relative;
    width: 100%;
}
#card figure, #card2 figure {
    backface-visibility: hidden;
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
    display: block;
    font-size: 40px;
    font-weight: bold;
    height: 350px;
    line-height: 20px;
    margin: auto;
    padding: 120px 0;
    position: absolute;
    text-align: center;
    width: 100% !important;
}
#card figure.back, #card2 figure.back {
    background: #fff none repeat scroll 0 0;
    padding: 30px;
}
.footerInner {
    margin: auto;
    max-width: 90%;
    padding: 10px 0;
    text-align: center;
}
h1 {
    color: #fff;
    font-size: 45px;
    font-weight: 900;
    line-height: 1em;
    margin: 24px 0 0;
    padding: 5px 0;
    text-transform: uppercase;
}
h2 {
	font-size: 19px;	
}
	#b1, #b2, #b3 {
		background-size: 600%;
	
	}
	.footer {
    background: #000 none repeat scroll 0 0;
    bottom: 0;
    display: block;
    float: left;
    margin: 0;
    position: relative;
    width: 100%;
}


}