body{
	/*font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial;*/
	font-family: 'GothamMedium', Helvetica, Arial;
}
/*
#load{
	display:none !important;
}*/
#wrapper{
	width: 100%;
    margin: 0 auto;
}
#main-content{
	position: relative;
    z-index: 5;
	margin-top:-2%
}
.content-wrapper{
	font-size:1em;
}
header{
	background: url('../images/grid.jpg');
}
.header-image{
	display: inline-block;
    width: 100%;
    position: relative;    
	z-index:2;
}
.mmi-logo{
	text-align:center;
}

.section{
	padding: 0em 0;
	width:100%;
	display:inline-block;
}
.section p{	
    font-size: 1.6em;
	width:90%;
	margin: 0 auto;
}
.introsection{
	width:100%;
	margin:0 auto;
	text-align:center;
	color:#fff;	
}
.section h1{
	font-family: inherit;
	font-size: 4.5em;
	margin:0;
	padding: 1em 0 0.25em 0;
}
.introsection h2{
	font-family: inherit;
	font-size:2.85em;
	padding:2em 0;
}
.introsection div p,.carousel p{
	font-family: inherit;
    font-size: 1.7em;
    width: 90%;
    margin: 0 auto;
    line-height: 2em;
    line-height: 1.7em;
}
.content-wrapper{
	color:#fff;
	background:#0a0a0a;
	font-family: inherit;
}
.left-panel,.right-panel{
	width:100%;	
}
.hotwheels .left-panel{
	min-height:200px;
}


.section h1{
	font-family:inherit;
}
.carousel{
	text-align:center;
}
.uno h1{
	width: 90%;
    margin: 0 auto;
    text-align: center;
	padding-bottom: 1em;
}
.barbie-image{
	width:59%;	
}
.fp-image{
	width:65%;
}
.barbie-image,.fp-image{
	margin:0 auto;
	position:relative;	
}
.barbie-image img{
	transform:rotate(4deg);
}
.ring{
	position:absolute;	
	    margin: 0 auto;
    text-align: center;
}
.ring1{	
	top: 34%;   
	left:10%;
	width:78%;
}
.ring2{	
	top: 20%;    
	left:14%;
	width:68%;
}
.ring3{	
	top: 8%;   
	left:18%;	
	width:58%;
}
.barbie-sunglass{
	position:absolute;
	top:12%;
	left:33%;
	width:30%;	
}
.carousel-wrapper .owl-pagination{
	display:none;
}
.carousel-wrapper .owl-prev{
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0%;
}
.carousel-wrapper .owl-next{
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0%;
}
.carousel-wrapper{
	width:100%;
	margin:20px auto;
}
.slider-thumbnail{	
	display:none;
}
.slider-detail{	
	width:100%;
}
.carousel-wrapper p,.carousel-wrapper h2{
	width:100%;
	color:#000;
}
.carousel-wrapper h2{
	margin-bottom:1em;
	font-style:italic;
}
.carousel-wrapper p{
	font-size:1.2em;	
}
.slider{
	background: #fff;
    display: flex;
    align-items: center;
	margin-bottom:15px;
}
.slider-content-align{	
	padding:1%;
}
.owl-theme .owl-controls .owl-buttons div{
	padding:11px 19px;
	zoom:1;
	opacity:1 !important;
	color: #dadada;
	font-size:20px;
	background:#6b6b6b;
}
.owl-prev.disabled,.owl-next.disabled{
	display:none !important;
}
.owl-theme .owl-controls.clickable .owl-buttons div {
    filter: Alpha(Opacity=100);
    opacity: 1 !important;
}
.fp-image{
	width:65%;
	margin:0 auto;
}
.slider-note{
	position:absolute;
	bottom:5px;
	left:10px;
}
.slider-note span{
	color:#000;
	font-weight: bold;
    font-style: italic;
}
.uno-card-wrapper{
	width:100%;
}
.uno-card{
	width:65%;
	margin:0 auto;
}
.external-links-wrapper{
	text-align:center;
	width:100%;
	display:inline-block;
	margin-top:5em;
}
.external-links{
	display:inline-block;
}
.logoImage{
	width:85%;
	margin:0 auto;	
	border:3px solid #fff;	
	border-radius:25px;
	margin-bottom:1.5em;
}
.hyperlink-info{
	margin:2em;
	min-height:35px;
	text-align:center;
}
.hyperlink-info a{
	color:#fff;
	font-size:1.5em;
}
.hyperlink-info a:hover,.hyperlink-info a:focus{
	text-decoration:none;
}
.bottom-banner{	
	background:#000;
}
.copyright-info{
	text-align:center;
}
.copyright-text{
	color:#fff;
}
.copyright-logo{
	margin-bottom:1em;
}
/* Barbie Animation */
.barbie-image{
	position: relative;
}
.barbie-sunglass[data-step="1"]{
	top:14%;
	transition: all 100ms ease-in-out;
}
.barbie-image img[data-step="1"]{
	transform:rotate(3deg);
	transition: all 100ms ease-in-out;
}
.barbie-sunglass[data-step="2"]{
	top:15%;
	transition: all 100ms ease-in-out;
}
.barbie-image img[data-step="2"]{
	transform:rotate(2deg);
	transition: all 100ms ease-in-out;
}
.barbie-sunglass[data-step="3"]{
	top:16%;
	transition: all 100ms ease-in-out;
}
.barbie-image img[data-step="3"]{
	transform:rotate(1deg);
	transition: all 100ms ease-in-out;
}
.barbie-sunglass[data-step="4"]{
	top:17%;
	transition: all 100ms ease-in-out;
}
.barbie-image img[data-step="4"]{
	transform:rotate(0deg);
	transition: all 100ms ease-in-out;
}
/*flip animation */
/* entire container, keeps perspective */
.uno-card-bg {perspective: 1000;-webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;}
/* flip the pane when hovered */
.uno-card-bg.hover .flipper {transform: rotateY(180deg);-webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);}
.uno-card-bg,.front,.back {width: 310px;height: 390px;margin:0 auto 10%}
/* flip speed goes here */
.flipper {transition: 4s;-webkit-transition: 0.6s;-moz-transition: 0.6s;transform-style: preserve-3d;-moz-transform-style: preserve-3d; -moz-transform: perspective(1000px); position: relative}
/* hide back of pane during swap */
.front, .back {backface-visibility: hidden;-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;position: absolute;top: 0;left: 0}
/* front pane, placed above back */
.front {z-index: 2;/* for firefox 31 */transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);}
/* back, initially hidden pane */
.back {transform: rotateY(180deg);  -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg)}
.front img,.back img{border-radius:25px}

/* Media Query*/
@media only screen and (min-width: 20em){
	.content-wrapper {
		font-size: 0.7em;
	}
	.barbie-sunglass{
		left:29%;
	}
	.barbie-sunglass img{
		width:76px;
	}
	
}
/*
@media only screen and (min-width: 23.43em){	
	.ring1{
		top:35%;		
	}
	.ring2{
		top:25%;	
	}
	.ring3{
		top:12%;	
	}
}*/
@media only screen and (min-width: 29.75em){
	.barbie-sunglass{
		left:31%;
	}	
}
@media only screen and (min-width: 35.5em){
	.content-wrapper {
		font-size: 1em;
	}
	.barbie-sunglass img{
		width:90px;
	}
}
@media only screen and (min-width: 39.8em){	
}
@media only screen and (min-width: 43.75em){	
	.barbie-sunglass img{
		width:108px;
	}
	.barbie-image {
		width: 55%;
	}	
}
@media only screen and (min-width: 48em){
	.barbie-sunglass{
		left:32%;
	}	
}
@media only screen and (min-width: 50em){		
	.fp-image {
		width: 100%;
	}
}
@media only screen and (min-width: 54.5em){
	.barbie-image{
		width:53%;
	}
}
@media only screen and (min-width: 58.06em){
	.barbie-image{
		width:51%;
	}
}
@media only screen and (min-width: 60em){
	
	.introsection div p, .carousel p{
		width: 55%;
	}
	.left-panel,.right-panel{
		width:50%;	
		float:left;
	}
	.align-content{
		display:flex;
		align-items:center;
		width:70%;
		margin:0 auto;
	}

	.barbie .left-panel{
		order:2;
	}
	.carousel-wrapper p,.carousel-wrapper h2{
		width:90%;
		font-size:1.5em;
		margin-bottom:2em;
	}
	.slider-content-align{
		padding:5%;
		display:flex;
		align-items:center;
	}
	.slider-thumbnail{
		width: 45%;
		float: left;
		display:block;
		margin-right: 2%;		
	}
	.slider-detail{
		width:53%;
		float:left;		
	}
	.owl-theme .owl-controls .owl-buttons div{	
		zoom:1.5;
	}
	.carousel-wrapper{
		width:85%;
	}
	.mmi-logo{
	position:absolute;
	top:7%;
	left:50%;
	transform:translate(-50%,0%);
	}
	.header-image{
		background-image: url(../images/background-img.png);
		/*background-size: 2191px 1347px;
		background-position: 44.5% -127.5%;
		height: 525px;*/
		background-size: 2131px 1287px;
		background-position: 44.5% -151.5%;
		height: 625px;
		
	}
	.uno h1{
		width: 90%;
	}
	.uno-card{
		width:25%;
	}
	.bottom-banner{
		background:url('../images/bottombanner.png');
		background-size: 1850px 1347px;
		background-position: 93.5% -85%;
		height: 280px;
		position: relative;
	}
	.copyright-info{
		position:absolute;
		bottom:0;
		right:10px;
	}
	.copyright-text{
		float: left;
		width: auto;
		margin-right: 1em;
		color:#000;
	}
	.copyright-text a u font{
		color:#0a0a0a !important;
	}
	.copyright-logo{
		float: right;
		margin-right: 1em;
		margin-bottom:0;
	}
	.copyright-info{
		text-align:left;
	}	
	.logoImage{
		margin-bottom:0;
		width:38%;
		margin-right:5%;
		padding:2em;
		display:inline-block;
	}
	.barbie-sunglass{
		width:auto;
		left:29%;
	}	
	.barbie-sunglass img{
		width:85px;
	}
	.barbie-image{
		width:75%;
	}
	.section4.fisherprice.section {
    margin-top: -12%;
}
}
@media only screen and (min-width: 75em){
	.barbie-sunglass img{
		/*width:108px;*/
	}
	.barbie-sunglass{
		/*left:27.5%*/
		left:32.25%
	}
}
@media only screen and (min-width: 1400px){
	.barbie-sunglass{
		left:27.5% 
	}
}
@media only screen and (min-width: 90em){
	.barbie-image{
		width:53%;
	}
}

/* Animation*/
.hotwheels-image{width:40%;margin-top:-2%;left:-8%;transform-origin: 50% 50% 0px;transform:translateX(-16%);position:absolute}
.hotwheels-image.scroll{transform-origin: 50% 50% 0px;transform:translateX(16%)}
.hotwheels-image .front-wheel{position: absolute;width: 13%;right: 28.75%;margin-top: -15.5%;transform-origin: 50% 50% 0px;transform: rotate3d(1,1,1, 43deg);}
.hotwheels-image .rear-wheel{position: absolute;width: 19%;right: 82.5%;margin-top: -28.90%;transform-origin: 50% 50% 0px;transform: rotate3d(0,1,1, -59deg);}
/*.mmi-logo-card{position: absolute;margin: 0%;z-index: 9;border-radius:25px}
.uno-card.front .card-black{transform-origin: 50% 50% 0;border-radius:25px;transform:rotateY(90deg);}
.mmi-logo-card.active{transform:rotateY(180deg);transition: 4s;border-radius:25px}
.uno-card.front{background: url(../images/unocard.jpg) 100% 0 no-repeat;background-size:contain;display: block;padding: 20% 0%}
.uno-card.front.active{background: url('../images/uno-card1-black.png') 100% 0 no-repeat;background-size:contain;transform:rotateY(180deg);transition: 3s;}*/
@keyframes card-rotate {
  0 {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(180deg);
  }
}
.logo-solid-color{opacity:0}
.logo-scribble{position:relative;margin-top:-125%}
@media only screen and (max-width: 767px) {
.hotwheels-image{width:75%;display:block}
/*.mmi-logo-card{width: 105px;margin: 14% 0% 0% 35%}*/	
.mmi-logo-card{width: 390px}
}
@media only screen and (max-width: 980px) {
.hyperlink-info{margin:13em 2em 2em}
}

path {
  stroke-dasharray: 50000;
  stroke-dashoffset: 50000;
  animation: dash 20s;
}

@keyframes dash {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
	background:#000;
}
.loader-img{
	background: url('../images/loadericon1.gif') no-repeat center center rgba(0,0,0,0.25);
    position: absolute;
    z-index: 100000;
    width: 150px;
    height: 100px;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
}





@media only screen and (max-width: 960px){
    span#teconsent a,span#irmlink a {
        color: #fff;
        text-decoration:underline
    }
    span#teconsent ,span#irmlink  {
        background: #000;
        display:block!important;
        margin-top: -3px;
    }
    span#teconsent {
        text-align: center;
        padding-right: 235px;
 }
    span#irmlink  {
        text-align: center;
        padding-right:10%;
        margin-top: -20px;
        padding-left: 110px;
    }
}

 

@media only screen and (min-width: 460px) and (max-width: 960px){ 

 

    span#teconsent {
        padding-right: 230px;
     }
    span#irmlink  {
        padding-left: 150px;
    }
}

 

@media only screen and (min-width: 960px){
    span#teconsent a,span#irmlink a {
        color: #0a0a0a;
        text-decoration:underline
    }

 

    span#teconsent {
        text-align: right;
        display: block!important;
        margin-right: 350px;
    }

 

    span#irmlink {
        text-align: right;
        display: block!important;
        margin-right: 115px;
        margin-top: -20px;
    }
}