@font-face {
    font-family: 'utsaahbold';
    src: url('fonts/utsaahb-webfont.eot');
    src: url('fonts/utsaahb-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/utsaahb-webfont.woff') format('woff'),
         url('fonts/utsaahb-webfont.ttf') format('truetype'),
         url('fonts/utsaahb-webfont.svg#utsaahbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'utsaahregular';
    src: url('fonts/utsaah-webfont.eot');
    src: url('fonts/utsaah-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/utsaah-webfont.woff') format('woff'),
         url('fonts/utsaah-webfont.ttf') format('truetype'),
         url('fonts/utsaah-webfont.svg#utsaahregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body { margin:0; padding:0;}
body { font-family:"utsaahregular", Arial, Helvetica, sans-serif; font-size:20px; color:#000;}
.img { display:none;}

div, img, span {-webkit-transition: all 0.3s ease 0s; 
-o-transition: all 0.3s ease 0s; 
transition: all 0.3s ease 0s;}

.contenedor {height: 397px; width: 100%; margin-top: 8%;}
.img-responsive { max-width:100%;}

.div1, .div2, .div3 { position:relative;}
.div1 { padding:0 50px 0; z-index:100;}
.div1 img {}

.div2 { background-color:#80ba27; color:#FFF; font-size:50px; padding:50px; line-height:40px; margin-top:-25px;}
.div2 b { font-weight:normal; color:#000;}

.div3 { position:absolute; bottom:0; right:70px; width:380px; height:248px;}
.div3 img { width:100%;}

/* Large desktop */
@media (min-width: 1200px) {
.contenedor {margin-top: 8%;}
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
.contenedor {margin-top: 10%;}
.div3 { position:absolute; bottom:0; right:20px; width:350px; height:228px;}
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.backstretch { display:none;}
.img { display:block;}
.img img { width:100%;}

.contenedor {margin-top:8%;}

.div1 { padding:0 20px 0; z-index:100;}
.div2 { font-size:40px; padding:30px; line-height:30px;}
.div2 span { width:330px; display:block;}
.div3 { position:absolute; bottom:0; right:10px; width:300px; height:196px;}
}
 
/* Landscape phones and down */
@media (max-width: 480px) {
.backstretch { display:none;}
.img img { width:100%;}

.contenedor {margin-top:20%;}

}