<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div id="header" class="container-fluid p-0">
<div class="row mr-auto ml-auto pt-2 pb-2 pt-md-3 pb-md-3 pt-lg-4 pb-lg-4">
<div class="col p-lg-0">
<!-- CONTENEDOR DEL LOGO -->
<a href="//www.ovnicom.com/">
<div class="logo" style="background: url('https://www.ovnicom.com/lp/servicios/logo_ovnicom.png'); background-position: center; background-size:100%; background-repeat: no-repeat;"></div>
</a>
</div>
</div>
</div>
<div id="heroe" class="container-fluid p-0">
<div class="row d-flex mr-auto ml-auto mb-5">
<div class="flex-fill bcolor-di"></div>
<div id="heroe-video" class="flex-fill p-0" style="width: 100%;">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/7Lvx3n15avU?rel=0"></iframe>
</div>
</div>
<div class="flex-fill bcolor-id"></div>
</div>
</div>
<div id="body" class="container-fluid p-0">
<div class="row mr-auto ml-auto text-center">
<h1 class="w-100 mb-5">¡Mira lo bien que quedó nuestro desayuno,<br/>solo faltaste tu!</h1>
</div>
</div>
<!-- CONTENEDOR DEL FORMULARIO -->
<div class="container form" style="">
<div style="position:relative; height:100%; width:100%;">
<span ><i class="far fa-check-circle mb-5"></i></span>
<div class="response pl-3 pt-5 pr-3 pb-5">
<span>¡Muchas gracias por su interes!</span><br/>
Su información a sido almacenada para futuros eventos
</div>
<style>
.container.form {height: 28em !important;}
</style>
<!--
<form class="form-horizontal" style="position: absolute; bottom:0px; left:0px; width:100%; ">
<fieldset>
<div class="form-group">
<label class="col-md-12 ml-3 control-label" for="nombre">Nombre *</label>
<div class="col-md-11">
<input id="nombre" name="nombre" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-12 ml-3 control-label" for="email">Correo electrónico *</label>
<div class="col-md-11">
<input id="email" name="email" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-12 ml-3 control-label" for="telefono">Número Telefónico *</label>
<div class="col-md-11">
<input id="telefono" name="telefono" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-12 ml-3 control-label" for="telefono">Compañía</label>
<div class="col-md-11">
<input id="company" name="company" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<div class="col-md-11">
<button id="btnEnviar" name="btnEnviar" class="btn btn-default w-100 mt-3 mb-3">Enviar Información</button>
</div>
</div>
</fieldset>
</form> -->
</div>
</div><!-- contenedor del formulario -->
<!-- CONTENEDOR DEL CAROUSEL -->
<div class="footer" style="">
<div class="d-flex justify-content-center">
<div>
<p>
<strong>Panamá:</strong><br/>
Oceanía Business Plaza torre 1000<br/>
30th floor, Punta Pacífica.<br/>
(+507) 200.5555
</p>
<p>
<strong>Whatsapp: <img src="//www.ovnicom.com/images/Whatsapp_icon.png" alt="Whatsapp icon" width="24" height="24" style="font-size: 12.16px;"></strong><br/>
(+507) 6415.8928
</p>
</div>
<div>
<p>
<strong>USA:</strong><br/>
(+1)(877) 452.4930
</p>
<p>
<strong>Costa Rica:</strong><br/>
(+506) 4001.2082
</p>
<p>
www.ovnicom.com
</p>
</div>
</div>
</div>
<div class="copyright" style="">
2019-2018 © Ovnicom
</div>
</div> <!-- /contenedor de la pagina -->
/* TEMPLATE ------- */
.container-fluid { max-width:1600px; }
/* DESIGN --------- */
#header {
background: #aa8658; /* Old browsers */
background: -moz-linear-gradient(left, #aa8658 0%, #f79718 50%, #aa8658 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #aa8658 0%,#f79718 50%,#aa8658 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #aa8658 0%,#f79718 50%,#aa8658 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aa8658', endColorstr='#aa8658',GradientType=1 ); /* IE6-9 */}
#header .row { max-width:950px; }
#header .logo {width: 10%; min-width:146px; min-height: 40px;}
#heroe {
padding: 0px;}
#heroe-video {
max-width: 950px;}
#heroe .bcolor-di {
background: #b29061; /* Old browsers */
background: -moz-linear-gradient(left, #b29061 0%, #e29839 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #b29061 0%,#e29839 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #b29061 0%,#e29839 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b29061', endColorstr='#e29839',GradientType=1 ); /* IE6-9 */}
#heroe .bcolor-id {
background: #e29839; /* Old browsers */
background: -moz-linear-gradient(left, #e29839 0%, #e29839 18%, #b29061 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #e29839 0%,#e29839 18%,#b29061 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #e29839 0%,#e29839 18%,#b29061 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e29839', endColorstr='#b29061',GradientType=1 ); /* IE6-9 */}
#body .row { max-width: 950px;}
#body h1 {
color: #454546;
text-transform: uppercase;
font-family: sans-serif;
font-size: 1.6em;
font-weight: 700;}
@media (max-width: 992px){#body h1 {font-size: 1.4em; }}
@media (max-width: 700px){#body h1 {font-size: 1.1em; }}
.container.form {
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
min-width: 230px;
min-height: 550px;
background-color: white;
background-image: url(https://www.ovnicom.com/lp/servicios/FORM.png);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
margin-bottom: 3em;}
.container.form {
width: 21em;
height: 38em;
left: auto;
bottom: auto;
right: 20.5%;
padding-right: 0px; padding-left: 0px; text-align: center;
padding-top: 3.4em;}
.container.form span {
font-family: 'Open Sans','Roboto', sans-serif; font-weight: 700; color: rgb(255, 255, 255);
font-size: 1.4em;}
@media (max-width: 992px){
.container.form span { font-size: 1.1em; }}
.container.form span i{font-size: 2.9em; color: lawngreen;}
.container.form .response {font-size: 1.1em;}
.container.form .response span {color: #454546;font-size: 1em;}
.container.form label {text-align: left; font-size: 0.9em; color:#797979;}
.container.form .form-control { }
@media (max-width: 992px){
.container.form label {font-size: 0.8em;}
.container.form .form-control {font-size: 0.7rem;}}
.container.form .form-group > div {margin-left: auto; margin-right: auto;}
.container.form .form-group button {font-family: 'Open Sans','Roboto', sans-serif; font-weight: 600; background-color: #E5700B; color: white; text-transform: uppercase;}
@media (max-width: 992px){ .container.form .form-group button {
font-size: 0.9em;
font-weight: 500; }}
.footer {background-color:#F3F3F3; font-family: 'Raleway', 'Open Sans','Roboto', sans-serif; font-size: 14px; text-align: left; padding: 3vw 0 2.3vw;}
.footer strong {font-si3ze: 1.1em; font-weight: 600;}
.footer > div > div:first-of-type {margin-right:10vw;}
.copyright {
background-color:#E5700B;
height:4em;
color:white;
line-height: 4em;
font-size: 14px;
text-align: center;
}
