/*!
 * Common CSS files
 */
* {
	margin: 0px;
	padding: 0px;
}
.img-responsive {
	width:100%;
	max-width:360px;
}
div#mainDiv {
    width:100%;
    position:relative;
    background:url(../images/logo-reseller-01.jpg) no-repeat center top;
    background-size:cover;
    min-height:500px;
    padding:54px 0 54px 0;
    float:left;
}
div#mainDiv h2.headinghome {
    color: #ffffff;
}
.logoAnimationsEffect {
	padding-top:14px;
}
#hideMe {
	z-index:8;
}
.fadeInLeft {
	animation-name: fadeInLeft;
 	animation-duration: 3s;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  	-webkit-animation-name: fadeInRight;
  	animation-name: fadeInRight;
 	animation-duration: 3s;
}


@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


.rollIn {
  -webkit-animation-name: rollIn;
	animation-name: rollIn;
 	animation-duration: 3s;
}

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

#hideMe01 {
/*    -webkit-animation: zoomIn 10s; 
    animation: zoomIn 10s forwards;
*/	z-index:4;
	animation-name: zoomIn;
 	animation-duration: 3s;
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

#hideMe02 {
/*    -webkit-animation: zoomIn 10s; 
    animation: zoomIn 10s forwards;
*/	z-index:2;
	animation-name: zoomIn02;
 	animation-duration: 3s;
}
@keyframes zoomIn02 {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomIn02 {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
#hideMe03 {
/*    -webkit-animation: zoomIn 10s; 
    animation: zoomIn 10s forwards;
*/	z-index:1;
	animation-name: zoomIn02;
 	animation-duration: 3s;
}
@keyframes zoomIn02 {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomIn02 {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

.img-responsive {
width:100%;
max-width:360px !important;
}
.logoAnimationsEffect .thumbnail {
display:inline-block !important;
}