html {
    background-color: #fff;
    color: #000;
    margin: 0;
    padding: 0;
}
body {
        margin: 0 auto;
    padding: 0;
        display: block;
    max-width: 1420px;
	max-height: 800px;
        overflow: auto;
}

.main
{
	position:relative;
	max-height: 780px;
	margin-left: auto;
	margin-right: auto;
}


.left {
        width: 50%;
        float: left;
		overflow: hidden;
		width: 710px;
		height: 750px;
		max-height: 800px;
		max-width: 960px;
		background-image: url("../images/tlo-man.png");
		background-position: 0 0;
		background-repeat: no;
		background-size: 100% 100%;
		-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
		
}
.left:hover {
  opacity: 0.9;
}
.right {
		
      
		overflow: hidden;
		width: 710px;
		height: 750px;
		max-height: 800px;
		max-width: 960px;
		background-image: url("../images/tlo-ford.png");
		background-position: 0 0;
		background-repeat: no;
		background-size: 100% 100%;
				-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
	
}
.right:hover {
  opacity: 0.9;
}

.container {
  position: relative;
  width: 100%;
  max-width: 1920px;

}

.man
{
	/*display: block;*/
	left: 50%;
	top: 40%;
	width: 100%;
	position: relative;
	font-family: arial;
	font-style: bold;
	color: #ffffff;
	display: block;
	margin-left: -180px;
	margin-right: auto;
	z-index: 1;
	opacity: 0.5;
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-ms-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}
.man:hover {
  opacity: 1;
 
}

.man-text
{
	/*display: block;*/
	left: 0%;
	top: 45%;
	width: 100%;
	position: relative;
	font-family: arial;
	font-style: bold;
	font-size: 20px;
	text-align: center;
	border: 5px;
	border-color: black;
	color: #000;
	display: block;
	margin-left: 0px;
	margin-right: auto;
	z-index: 1;

}
svg {
  font-size: 20px;
  font-weight: bold;
  width: 450px;
  height: 120px;
  fill: black;
}
 .man-text h3{
    -webkit-text-stroke: 1px white;
    text-stroke: 1px white;
	align: center;
    }

.svgText {
  fill: black;
  stroke: white;
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke;
  align: center;
}

.ford
{
	left: 50%;
	top: 40%;
	width: 100%;
	position: relative;
	display: block;
	margin-left: -150px;;
	margin-right: auto;
	z-index: 1;
	opacity: 0.5;
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-ms-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}
.ford:hover {
  opacity: 1;
}

.albor 
{
	position: absolute;
	top: 20px;
	left: 50%;
	margin-left: -150px;
	z-index:1;
	-webkit-animation: myAnim 5s ease 0s 1 normal forwards;
	animation: myAnim 5s ease 0s 1 normal forwards;
}

@keyframes myAnim {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.image1 {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #04AA6D;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}