/* x2o styling */

.y-middle {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    flex-direction: row;
    -webkit-flex-direction: row;
}

#main {
	background-color: #FCD700;
	
	color: #0161AC;
	height: 100vh;
	font-family: 'Gotham Medium', sans-serif;
}

.bg {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	background-image: url(/assets/streep.png);
	background-size: 90vw;
	background-position: -20vw -5vh;
	background-repeat: no-repeat;
}

h1 {
	line-height: 1.5em;
}

strong {
	font-family: 'Gotham Black', sans-serif;
}

.container-fluid,
.row {
	height: inherit;
}

.logo {
	margin-bottom: 15vh;
    height: 20vh;
}

.carousel-indicators {
	display: table;
    position: relative;
    bottom: 0;
    left: 50%;
    z-index: 0;
    width: auto;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 60px;
    text-align: center;
    transform: translateX(-50%);
}

.carousel-indicators li {
    display: inline-block;
    float: left;
    width: auto;
    height: 80px;
    margin: 0 30px;
    text-indent: 0;
    cursor: normal;
    background-color: transparent;
    border: none;
    border-radius: 0;
    opacity: 0.33;
}

.carousel-indicators .active {
    width: auto;
    height: 80px;
    margin: 0 30px;
    background-color: transparent;
    opacity: 1;
}

.carousel-inner {
	height: calc(26vh - 80px);
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

.wallsio-iframe-container {
	position: relative;
	transform: rotate(-3.5deg) !important;
}

.wallsio-iframe-container .label {
	background-color: white;
	color: #0161AC;
	position: absolute;
	display: block;
	bottom: 10px;
	left: 50%;
	max-width: 40vw;
	width: 100%;
	transform: translateX(-50%);
}

.label h1 {
	line-height: 2.5em;
}

.wallsio-iframe {
	border: solid white !important;
	border-width: 25px 20px 20px 20px !important;
	height: 65vh !important;
	max-width: 40vw;
	margin: 0 auto;
	display: block;
}

#logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	z-index: 1;
	width:  50%;
}

.fill {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	transform: scaleX(0);
}

.fill-blue {
	background-color: #0161AC;
}

.fill-white {
	background-color: white;
}

.swipe-in {
	transform-origin: left center;
	animation: swipeIn 0.5s cubic-bezier(.59,.38,.08,1);
	animation-fill-mode: both;
}

.swipe-out {
	transform-origin: right center;
	animation: swipeOut 0.5s cubic-bezier(.59,.38,.08,1);
	animation-fill-mode: both;
}

.fade-in {
	animation: fadeIn 0.5s cubic-bezier(.59,.38,.08,1);
	animation-fill-mode: both;
}

.fade-in-delayed {
	animation: fadeIn 0.5s cubic-bezier(.59,.38,.08,1) 0.5s;
	animation-fill-mode: both;
}

.fade-out {
	animation: fadeOut 0.5s cubic-bezier(.59,.38,.08,1);
	animation-fill-mode: both;
}

.zoom-in {
	animation: zoomIn 0.5s cubic-bezier(.59,.38,.08,1);
	animation-fill-mode: both;
}

.zoom-out {
	animation: zoomOut 0.250s cubic-bezier(.59,.38,.08,1) 0.250s;
	animation-fill-mode: both;
}

@media screen and (max-width: 1024px) {
	.logo {
		height: 17.5vh;
		margin-bottom: 12.5vh;
	}

	h1 {
		font-size: 26px;
	}

	.label h1 {
		font-size: 22px;
	}

	.carousel-indicators {
	    margin-bottom: 40px;
	}

	.carousel-indicators li {
	    height: 70px;
	    margin: 0 20px;
	}

	.carousel-indicators .active {
	    height: 70px;
	    margin: 0 20px;
	}

	.carousel-inner {
		height: calc(26vh - 40px);
	}

	.wallsio-iframe {
		height: 65vh !important;
		max-width: 50vw;
		margin: 0 auto;
		display: block;
		border-width: 20px 15px 15px 15px !important;
	}
}

@media screen and (min-width: 1080px) {
	.carousel-indicators li {
	    height: 100px;
	    margin: 0 40px;
	}

	.carousel-indicators .active {
	    height: 100px;
	    margin: 0 40px;
	}

	.carousel-inner {
		height: calc(26vh - 40px);
	}

	.wallsio-iframe {
		height: 80vh !important;
		max-width: 40vw;
		margin: 0 auto;
		display: block;
	}
}

@media screen and (min-width: 768px) {
	.carousel-indicators {
	    bottom: 0;
	}

}

@keyframes swipeIn {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes swipeOut {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes zoomIn {
  from { transform: translate(-50%, -50%) scale(0); }
  to { transform: translate(-50%, -50%) scale(1); }
}

@keyframes zoomOut {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(0); }
}

@font-face {font-family: "Gotham Black";
  src: url("/fonts/Gotham/Gotham-Black.eot"); /* IE9*/
  src: url("/fonts/Gotham/Gotham-Black.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/fonts/Gotham/Gotham-Black.woff2") format("woff2"), /* chrome、firefox */
  url("/fonts/Gotham/Gotham-Black.woff") format("woff"), /* chrome、firefox */
  url("/fonts/Gotham/Gotham-Black.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("/fonts/Gotham/Gotham-Black.svg#Gotham Black") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "Gotham Black Italic";
  src: url("/fonts/Gotham/Gotham-BlackItalic.eot"); /* IE9*/
  src: url("/fonts/Gotham/Gotham-BlackItalic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/fonts/Gotham/Gotham-BlackItalic.woff2") format("woff2"), /* chrome、firefox */
  url("/fonts/Gotham/Gotham-BlackItalic.woff") format("woff"), /* chrome、firefox */
  url("/fonts/Gotham/Gotham-BlackItalic.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("/fonts/Gotham/Gotham-BlackItalic.svg#Gotham Black Italic") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "Gotham Bold";
  src: url("/fonts/Gotham/Gotham-Bold.eot"); /* IE9*/
  src: url("/fonts/Gotham/Gotham-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/fonts/Gotham/Gotham-Bold.woff2") format("woff2"), /* chrome、firefox */
  url("/fonts/Gotham/Gotham-Bold.woff") format("woff"), /* chrome、firefox */
  url("/fonts/Gotham/Gotham-Bold.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("/fonts/Gotham/Gotham-Bold.svg#Gotham Bold") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "Gotham Bold Italic";
  src: url("/fonts/Gotham/Gotham-BoldItalic.eot"); /* IE9*/
  src: url("/fonts/Gotham/Gotham-BoldItalic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/fonts/Gotham/Gotham-BoldItalic.woff2") format("woff2"), /* chrome、firefox */
  url("/fonts/Gotham/Gotham-BoldItalic.woff") format("woff"), /* chrome、firefox */
  url("/fonts/Gotham/Gotham-BoldItalic.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("/fonts/Gotham/Gotham-BoldItalic.svg#Gotham Bold Italic") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "Gotham Medium";
  src: url("/fonts/Gotham/Gotham-Medium.eot"); /* IE9*/
  src: url("/fonts/Gotham/Gotham-Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/fonts/Gotham/Gotham-Medium.woff2") format("woff2"), /* chrome、firefox */
  url("/fonts/Gotham/Gotham-Medium.woff") format("woff"), /* chrome、firefox */
  url("/fonts/Gotham/Gotham-Medium.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("/fonts/Gotham/Gotham-Medium.svg#Gotham Medium") format("svg"); /* iOS 4.1- */
}

/* margin */
.m-a-0 { margin:        0 !important; }
.m-t-0 { margin-top:    0 !important; }
.m-r-0 { margin-right:  0 !important; }
.m-b-0 { margin-bottom: 0 !important; }
.m-l-0 { margin-left:   0 !important; }
.m-x-0 { margin-right:  0 !important; margin-left:   0 !important; }
.m-y-0 { margin-top:    0 !important; margin-bottom: 0 !important; }

.m-a { margin:        10px !important; }
.m-t { margin-top:    10px !important; }
.m-r { margin-right:  10px !important; }
.m-b { margin-bottom: 10px !important; }
.m-l { margin-left:   10px !important; }
.m-x { margin-right:  10px !important; margin-left: 10px !important; }
.m-y { margin-top:    10px !important; margin-bottom: 10px !important; }
.m-x-auto { margin-right: auto !important; margin-left: auto !important; }

.m-a-md { margin:        25px !important; }
.m-t-md { margin-top:    25px !important; }
.m-r-md { margin-right:  25px !important; }
.m-b-md { margin-bottom: 25px !important; }
.m-l-md { margin-left:   25px !important; }
.m-x-md { margin-right:  25px !important; margin-left:   25px !important; }
.m-y-md { margin-top:    25px !important; margin-bottom: 25px !important; }
.m-l-auto { margin-left:   auto !important; }
.m-r-auto { margin-right:   auto !important; }

.m-a-lg { margin:        50px !important; }
.m-t-lg { margin-top:    50px !important; }
.m-r-lg { margin-right:  50px !important; }
.m-b-lg { margin-bottom: 50px !important; }
.m-l-lg { margin-left:   50px !important; }
.m-x-lg { margin-right:  50px !important; margin-left:   50px !important; }
.m-y-lg { margin-top:    50px !important; margin-bottom: 50px !important; }

.new-row-md,
.new-row-sm { margin-top: 40px; }

/* padding */
.p-a-0 { padding:        0 !important; }
.p-t-0 { padding-top:    0 !important; }
.p-r-0 { padding-right:  0 !important; }
.p-b-0 { padding-bottom: 0 !important; }
.p-l-0 { padding-left:   0 !important; }
.p-x-0 { padding-left:   0 !important; padding-right: 0 !important; }
.p-y-0 { padding-top:    0 !important; padding-bottom: 0 !important; }

.p-a { padding:        30px !important; }
.p-t { padding-top:    30px !important; }
.p-r { padding-right:  30px !important; }
.p-b { padding-bottom: 30px !important; }
.p-l { padding-left:   30px !important; }
.p-x { padding-right:  30px !important; padding-left:   30px !important; }
.p-y { padding-top:    30px !important; padding-bottom: 30px !important; }

.p-a-md { padding:        60px !important; }
.p-t-md { padding-top:    60px !important; }
.p-r-md { padding-right:  60px !important; }
.p-b-md { padding-bottom: 60px !important; }
.p-l-md { padding-left:   60px !important; }
.p-x-md { padding-right:  60px !important; padding-left:   60px !important; }
.p-y-md { padding-top:    60px !important; padding-bottom: 60px !important; }

.p-a-lg { padding:        120px !important; }
.p-t-lg { padding-top:    120px !important; }
.p-r-lg { padding-right:  120px !important; }
.p-b-lg { padding-bottom: 120px !important; }
.p-l-lg { padding-left:   120px !important; }
.p-x-lg { padding-right:  120px !important; padding-left:   120px !important; }
.p-y-lg { padding-top:    120px !important; padding-bottom: 120px !important; }


@media only screen and (max-width: 991px) {
	.y-middle {
		display: block;
	}
}