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


/*
introduction 2 - NEW YORK
introduction 3 - LONDON
introduction 4 - ROME
introduction 5 - SAN FRANCISCO
introduction 6 - RIO DE JANEIRO
introduction 7 - BERLIN
introduction 8 - PARIS
introduction 9 - QUEBEC
*/


/* introduction 2 - NEW YORK */
.introduction-2 {
position: relative;
width: 100%;
height: auto;
margin: 0;
padding: 0 20px;
}

.morphext > .animated {
display: inline-block;
}

.introduction-2 h1 {
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 105px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fff;
margin: 28px auto 40px auto;
width: 100%;
line-height: 100%;
text-shadow: 1px 1px 2px #111;
}

.introduction-2 h2 {
font-family: 'Dosis', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.65em;
color: #fff;
margin: -9px 0 0 0!important;
text-shadow: 1px 1px 2px #111;
}

.introduction-2 h3 {
font-family: 'Dosis', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.65em;
color: #fff;
margin: -11px 0 0 0!important;
text-shadow: 1px 1px 2px #111;
}

@media only screen and (max-width: 880px) {

.introduction-2 h1 {
font-size: 70px;
margin: 26px auto 39px auto;
}

.introduction-2 h2 {
font-size: 11px;
}

.introduction-2 h3 {
font-size: 11px;
}

}


/* introduction 3 - LONDON */
.introduction-3 {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
padding: 0 20px;
}

.introduction-3 h1 {
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 105px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fff;
margin: 33px auto 28px auto;
width: 100%;
line-height: 100%;
text-shadow: 1px 1px 2px #111;
}

.introduction-3 h3, .introduction-3 div {
font-family: 'Dosis', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.65em;
color: #fff;
text-shadow: 1px 1px 2px #111;
}

.introduction-3 h3 {
margin: 0 auto;
width: 400px;
border-bottom: 1px solid #fff;
padding: 0 0 15px 0;
}

.introduction-3 h3 span, .introduction-3 div span {
font-family: 'Dosis', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.35em;
color: #fff;
text-shadow: 1px 1px 2px #111;
display: inline-block;
}

.introduction-3-line {
width: 120px;
height: 1px;
background: #fff;
margin: 4px 14px;
text-align: center;
}

@media only screen and (max-width: 880px) {

.introduction-3 h1 {
font-size: 70px;
margin: 25px auto 20px auto;
}

.introduction-3 h3 {
font-size: 11px;
width: 280px;
padding: 0 0 11px 0;
}

.introduction-3-line {
width: 60px;
}

}


/* introduction 4 - ROME */
.introduction-4 {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
padding: 0 20px;
}

.introduction-4 h1 {
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 105px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.35em;
color: #fff;
margin: 0 auto 26px auto;
padding-left: 32px;
width: 100%;
line-height: 100%;
text-shadow: 1px 1px 2px #111;
}

.introduction-4 h2 {
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 55px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #111;
text-shadow: none;
padding: 17px 0 17px 4px;
margin-bottom: 24px;
text-shadow: none;
}

.introduction-4 h3 {
font-family: 'Dosis', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.65em;
color: #fff;
text-shadow: 1px 1px 2px #111;
margin: 0 auto;
width: 346px;
border-bottom: 1px solid #fff;
padding: 0 0 25px 8px;
}

.introduction-4-bg {
margin: 0 auto;
width: 346px;
}

@media only screen and (max-width: 880px) {

.introduction-4 h1 {
font-size: 70px;
margin: 0 auto 18px auto;
padding-left: 22px;
}

.introduction-4 h2 {
font-size: 35px;
padding: 12px 0 12px 4px;
margin-bottom: 16px;
}

.introduction-4 h3 {
font-size: 11px;
letter-spacing: 0.45em;
width: 230px;
padding: 0 0 16px 5px;
}

.introduction-4-bg {
width: 230px;
}

}


/* introduction 5 - SAN FRANCISCO */
.introduction-5 {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
padding: 0 20px;
}

.introduction-5 h1 {
position: relative;
color: #fff;
font-family: 'Oswald', sans-serif;
font-size: 75px;
font-weight: 400;
letter-spacing: normal;
text-transform: uppercase;
text-align: center;
line-height: 1.2;
margin: 27px auto 28px auto;
text-shadow: 1px 1px 2px #111;
}

.introduction-5-text {
position: relative;
width: 230px;
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: none;
text-align: center;
margin: 0 auto;
padding: 0 10px;
text-shadow: 1px 1px 2px #111;
}

span.line-bg-left,
span.line-bg-right {
position: absolute;
background: url(../img/line-bg.png) repeat-x left center;
width: 60%;
height: 100%;
top: 0;
}

.introduction-5-text-bg {
color: #111;
text-shadow: none;
}

.introduction-5-text-padding {
padding: 0 15px 0 15px;
}

span.line-bg-left {
left: 100%;
}

span.line-bg-right {
right: 100%;
}

@media only screen and (max-width: 880px) {

.introduction-5 h1 {
font-size: 50px;
line-height: 1.2;
margin: 27px auto 29px auto;
}

.introduction-5-text {
width: 140px;
font-size: 13px;
letter-spacing: normal;
}

.introduction-5-text-padding {
padding: 0 5px 0 5px;
}

}

@media only screen and (max-width: 480px) {

span.line-bg-left,
span.line-bg-right {
width: 30%;
}

}


/* introduction 6 - RIO DE JANEIRO */
.introduction-6 {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
padding: 0 20px;
-webkit-transform: rotate(-30deg);
   -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
     -o-transform: rotate(-30deg);
        transform: rotate(-30deg);
-webkit-transform-origin: center;
   -moz-transform-origin: center;
    -ms-transform-origin: center;
	 -o-transform-origin: center;
        transform-origin: center;
}

.introduction-6 h1 {
position: relative;
color: #fff;
font-family: 'Oswald', sans-serif;
font-size: 90px;
font-weight: 700;
letter-spacing: -0.04em;
text-transform: uppercase;
text-align: center;
line-height: 1;
margin: 30px auto 30px auto;
text-shadow: 1px 1px 2px #111;
}

.introduction-6-text {
position: relative;
width: 230px;
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: none;
text-align: center;
margin: 0 auto;
padding: 0 10px;
text-shadow: 1px 1px 2px #111;
}

span.line-bg-left-2,
span.line-bg-right-2 {
position: absolute;
background: url(../img/line-bg.png) repeat-x left center;
width: 30%;
height: 100%;
top: 0;
}

.introduction-6-text-bg {
color: #111;
text-shadow: none;
}

.introduction-6-text-padding {
padding: 0 15px 0 15px;
}

span.line-bg-left-2 {
left: 100%;
}

span.line-bg-right-2 {
right: 100%;
}

@media only screen and (max-width: 640px) {

.introduction-6 h1 {
font-size: 50px;
margin: 28px auto 30px auto;
}

.introduction-6-text {
width: 140px;
font-size: 13px;
letter-spacing: normal;
}

.introduction-6-text-padding {
padding: 0 5px 0 5px;
}

}


/* introduction 7 - BERLIN */
.introduction-7 {
position: relative;
width: 100%;
height: auto;
margin: 0;
padding: 0 20px;
}

.morphext > .animated {
display: inline-block;
}

.introduction-7 h1 {
position: relative;
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 105px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fff;
margin: 28px auto 40px auto;
width: 100%;
line-height: 100%;
text-shadow: 1px 1px 2px #111;
z-index: -2;
}

.introduction-7 h2 {
font-family: 'Dosis', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.65em;
color: #fff;
margin: -9px 0 0 0!important;
text-shadow: 1px 1px 2px #111;
}

.introduction-7 h3 {
font-family: 'Dosis', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.65em;
color: #fff;
margin: -11px 0 0 0!important;
text-shadow: 1px 1px 2px #111;
}

.borders-berlin {
position: absolute;
left: -220px;
right: 0;
top: -37px;
margin: 0 auto;
box-shadow: 0 0 25px rgba(17, 17, 17, .95);
z-index: -1;
}

.borders-berlin, .borders-berlin:after, .borders-berlin:before {
width: 265px;
height: 265px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

@media only screen and (max-width: 880px) {

.introduction-7 h1 {
font-size: 70px;
margin: 26px auto 39px auto;
}

.introduction-7 h2 {
font-size: 11px;
}

.introduction-7 h3 {
font-size: 11px;
}

.borders-berlin {
left: -146px;
top: -19px;
}

.borders-berlin, .borders-berlin:after, .borders-berlin:before {
width: 185px;
height: 185px;
}

}


/* introduction 8 - PARIS */
.introduction-8 {
position: relative;
width: 100%;
height: auto;
margin: 0;
padding: 0 20px;
}

.introduction-8 .introduction-8-intro-wrapper .introduction-8-intro-circle {
width: 360px;
height: 360px;
text-align: center;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
-webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
-webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, .25);
   -moz-box-shadow: 0 0 0 10px rgba(255, 255, 255, .25);
	    box-shadow: 0 0 0 10px rgba(255, 255, 255, .25);
overflow: hidden;
margin: 0 auto;
}

.introduction-8 .introduction-8-intro-wrapper .introduction-8-intro-circle:hover {
-webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
	 -o-transform: scale(1.2);
	    transform: scale(1.2);
	-webkit-transform-style: preserve-3d;
-webkit-box-shadow: 0 0 0 15px rgba(255, 255, 255, .25);
   -moz-box-shadow: 0 0 0 15px rgba(255, 255, 255, .25);
	    box-shadow: 0 0 0 15px rgba(255, 255, 255, .25);
overflow: hidden;
}

.introduction-8 .introduction-8-intro-wrapper .introduction-8-intro-circle.no-safari {
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

.introduction-8 .introduction-8-quotation {
display: table-cell;
vertical-align: middle;
width: inherit;
height: inherit;
text-align: center;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
}

.introduction-8 .slabtextdone {
color: #fff;
}

.introduction-8 .introduction-8-quotation {
padding: 55px;
}

.introduction-8 h1 {
font-family: 'Oswald', sans-serif;
font-weight: 400;
text-shadow: 1px 1px 2px #111;
}

/* slabtext */
.slabtexted .slabtext{display:-moz-inline-box;display:inline-block;white-space:nowrap}.slabtextinactive .slabtext{display:inline;white-space:normal;font-size:1em !important;letter-spacing:inherit !important;word-spacing:inherit !important;*letter-spacing:normal !important;*word-spacing:normal !important}.slabtextdone .slabtext{display:block}

@media only screen and (max-width: 880px) {

.introduction-8 .introduction-8-intro-wrapper .introduction-8-intro-circle {
width: 280px;
height: 280px;
}

.introduction-8 .introduction-8-quotation {
padding: 35px;
}

}


/* introduction 9 - QUEBEC */
.introduction-9 h1 {
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 105px;
text-align: center;
text-transform: uppercase;
letter-spacing: normal;
line-height: 100%;
margin: 0;
text-shadow: 1px 1px 2px #111;
}
	
.introduction-9 .top-text {
color: #fff;
font-size: 80px;
text-align: left;
}

.introduction-9 .rotated-text h2 {
font-size: 20px;
margin: 0;
padding: 0;
line-height: 120%;
text-shadow: 1px 1px 2px #111;
clear: both;
}

.clear {
clear: both;
}

.introduction-9 .rotated-text {
position: relative;
width: 30.5%; 
height: 390px;
margin: 0 auto;
-webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
        transform: rotate(45deg);
}

.introduction-9 .top-text-wrapper {
position: absolute; 
left: 75px;
top: -30px;
-webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
}

.introduction-9 .top-text-wrapper h2 {
position: relative;
color: #8d8d8d;
margin-top: 10px; 
z-index: 2;
}
	
.introduction-9 .quebec-wrapper {
position: absolute;
top: 210px;
-webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
        transform: rotate(0deg);
}

.introduction-9 .quebec { 
letter-spacing: 0.05em;
margin-top: 10px;
}

.introduction-9 .city {
color: #fff;
font-size: 50px;
text-align: center;
margin-top: 12px;
}

@media only screen and (max-width: 880px) {

.introduction-9 h1 {
font-size: 55px;
}

.introduction-9 .top-text {
font-size: 40px;
}

.introduction-9 .rotated-text {
height: 330px;
}

.introduction-9 .top-text-wrapper {
left: 10px;
top: 40px;
}

.introduction-9 .city {
font-size: 40px;
}

}

@media only screen and (max-width: 640px) and (orientation: landscape) {

.introduction-9 {
margin: -80px 0 0 0;
}

}

@media only screen and (max-width: 480px) {

.introduction-9 {
margin: -80px 0 0 0;
}

}