/*
Estilos css para Antares PastelerÃa | Ja! Estudio | Armando Pérez | 2016
_________________*/
/*
Colores:
Amarillo: #ffc600;
gris: #262a33;
TipografÃas:
font-family: 'Roboto';
font-family: 'Roboto Condensed';
font-family: 'Montserrat';
_____________________*/
*{ margin: 0; padding: 0; font-family: "Roboto"}
a, a:hover{text-decoration: none}
/* Mensaje de Alerta */
.mensaje_alerta{ width: 300px; position: fixed; z-index: 121; top: 50%; margin-top: -30px; left: 50%; margin-left: -150px; background-color: #ffc600; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; display: none; }
.mensaje_alerta span{ float: right; right: 0; color: #262a33; font-weight: 700; margin: 0px 0px; cursor: pointer; width: 20px; height: 20px; text-align: center;; margin: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-weight: 700; font-family: 'Roboto'}
.mensaje_alerta span:hover{ background-color: rgba(0,0,0,.1);}
.mensaje_alerta p{ width: 96%; color: #262a33; margin: 30px auto; text-align: center; font-family: 'Roboto'; font-weight: 700;}
.black_alert{ width:100%; height:100%; position:fixed; background-color:rgba(0,0,0,.7); display:none; z-index: 120}
/* Navigacion */
nav{width: 100%; height: 130px; background-color: #fff; z-index: 110; position:fixed; box-shadow: 0px 0 30px 0px #0E0A1A; }
img.logo_nav{ width: 120px; height: auto; margin: 10px 0 0 100px; float: left;}
.content_menu{height: auto; float: right; margin-right: 100px;/* background-color: rgba(0,0,0,.1);*/}
.content_menu ul li{ color: #3f4043; font-size: 15px; display: inline-block; padding: 50px 13px 10px 13px; font-family: 'Roboto Condensed'; font-weight: 700; text-transform: uppercase; margin: 0 auto; transition: background-color .8s; }
.content_menu ul li:hover { background-color: #ffc600; transition: background-color .3s;}
.content_menu ul li img { width: 16px}
span.contentredes{ display: inline; vertical-align: text-bottom;}
img.redessocialesbav{ width:20px; }
.active_menu{background-color: #ffc600; color: #262a33 }
/* MENU RESPONSIVO */
#menu_cuad{ width:40px; height:auto; float:right; text-align:left; display:none; margin: 40px 50px 0 0}
#menudesp{ width:100%; height:auto; }
.lineamenu{ width:100%; height:6px; background-color:#262a33; margin-top:7px; cursor: pointer;}
#menudesplegado{ width:96%; height:auto; background-color:#262a33; margin:120px 2% 0 2%; position:fixed; top: -300px; display:block; z-index: 101; padding-bottom: 30px; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; } /*right: -300*/
#menudesplegado ul{ width:100%; height:auto; float:right; display:block; text-align: center; text-align: left; margin-top: 20px;}
#menudesplegado ul li{ font-size: 12px; text-transform: uppercase; height:auto; padding: 12px 0 12px 4%; list-style-type:none; font-family: 'Roboto', sans-serif; text-decoration:none; border-bottom:solid 1px rgba(200,200,200,.5); cursor:pointer;}
#menudesplegado ul a{ color: #fff}
#menudesplegado ul a:hover{ text-decoration: none;}
#menudesplegado ul li:hover{text-decoration: none; background-color:#ffc600; color: #262a33; }
#menudesplegado ul li img{width: 18px }
.contentredes{ display: inline-block;}
.back-menu{ width:100%; height:100%; position:fixed; background-color:rgba(256,256,256,.8); display:none; z-index: 100}
/* Banner */
div#anclahome{ width: 100%; height: 130px; }
.carousel-inner > .item > img,
.carousel-inner > .item > a > img { width: 100%; margin: auto; }
.contenedor_de_banner{ width: 100%;}
.carousel-control{ width: 5% !important}
.carousel-inner>.item { overflow: hidden !important;}
span.captionimage{ width: 100%; color: #fff; position: absolute; text-align: center; margin-top: 350px; font-family: 'Montserrat' !important; text-transform: uppercase;}
.captionimage h2.mini_texto1{width: 90%;font-weight: 100; font-size:25px; margin: 0 auto; text-shadow: 0px 0px 20px rgba(0, 0, 0,.9);}
.captionimage h2.mini_texto2{width: 90%;font-weight: 100; font-size:60px; margin: 0 auto; text-shadow: 0px 0px 20px rgba(0, 0, 0,.9);}
.captionimage h2.mini_texto3{width: 90%;font-weight: 700; font-size:55px; margin: 0 auto; text-shadow: 0px 0px 20px rgba(0, 0, 0,.9);}
.captionimage h3.grand_banner1{width: 80%; font-weight: 700; font-size: 50px; margin: 5px auto; text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.89);}
.captionimage h3.grand_banner2{width: 80%; font-weight: 700; font-size: 90px; margin: 5px auto; text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.89);}
.captionimage h3.grand_banner3{width: 80%; font-weight: 100; font-size: 30px; margin: 5px auto; text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.89);}
.captionimage h4{width: 90%; font-weight: 700; font-size:50px; margin: 5px auto; }
.carousel-indicators{ bottom: 50px !important; }
.glyphicon-chevron-left:before { content: none !important;}
.glyphicon-chevron-right:before { content: none !important;}
#descripcion_inicio{ width: 100%; min-height: 330px; background: #ededed; padding-bottom: 20px; }
.contenidoinicio{ width: 80%; min-height: 200px; height: auto; margin: -40px 10% auto 10%; position: absolute; background-color: #262a33; text-align: center; display: block; box-shadow: 0 0 20px 0 #000; padding-bottom: 40px;}
h2.titulos_pantallas{ max-width: 1250px; width: 90%; color: #ffc600; font-size: 70px; text-transform: uppercase; font-weight: 900; font-family: 'Roboto'; margin: 0 auto; text-align: left; margin-top: 30px; border-bottom: solid 3px #ffc600; padding-bottom: 10px; display: inline-block;}
.contenidoinicio p{ max-width: 900px; width: 90%; color: #fff; margin: 20px auto; font-family: 'Roboto';font-weight: 100; text-align: justify; font-size: 15px; }
/*
NOSOTROS
_____________*/
section#Nosotros{ width: 100%; min-height: 600px; padding-bottom: 40px; text-align: center;}
.bannersuperior{ width: 100%; height: 400px; margin-top: 130px; display: inline-block; border-bottom: solid 3px #ffc600}
h2#nosotrostitlebig{ color: #fff; text-align: center; width: 80%; margin: 90px auto 0 auto; font-size:90px; font-weight: 900; text-transform: uppercase;}
h3#nosotrostitlesmall{ color: #fff; text-align: center; width: 80%; margin: 0 auto; font-size:50px; font-weight: 700; text-transform: uppercase;}
.contentnosotros{width: 80%; margin: 40px auto auto auto; background-color: #262a33; text-align: center; display: inline-block; box-shadow: 0 0 20px 0 #000; box-sizing: border-box; padding: 0 5% 30px 5% }
#historia{ width: 50%; display: inline-block; min-height: 200px; float: left; margin-top: 30px; text-align: center;}
#historia h3{ color: #ffc600; font-weight: 700; width: 90%; text-align: left; margin: 0 auto}
#historia p{ color: #fff; font-weight: 100; width: 90%; text-align: justify; margin: 0 auto; margin-top: 20px; font-size: 16px;}
video#videoctesa{ width: 50%; display: inline-block; height: 300px; background:url(../img/video_logo.svg) center center no-repeat #fff; float: left; margin-top: 30px; text-align: center;}
video[poster]{
background-color: !important; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;
}
#contenedorMVV{ width: 100%; min-height: auto; /*background-color: rgba(0,0,0,.1);*/ display: inline-block; margin-top: 20px; display: flex; padding-top: 50px;}
.valoresoptions{ width: 33.33333%; min-height:auto; /*background-color: rgba(0,0,0,.2)*/;}
.valoresoptions img{ display: block; width: 80px; margin-left: 30px; text-align: center;}
.contenedortextoop{ width: 90%; min-height: 180px; background-color: #fff; margin: 10px auto; padding: 10px;}
.contenedortextoop h4{ width: 90%; color: #262a33; font-weight: 700; text-align: left; margin: 8px auto}
.contenedortextoop p{ width: 90%; color: #262a33; font-weight: 300; text-align: justify; margin: 0px auto; font-size: 13px;}
.contenedortextoop ul{ width: 90%; color: #262a33; font-weight: 100; text-align: justify; margin: 0px auto}
/*
SERVICIOS
_____________*/
section#servicios{width: 100%; min-height: 600px; padding-bottom: 40px; text-align: center; background-color: #262a33}
h2#servtitlebig{ color: #fff; text-align: center; width: 80%; margin: 130px auto 0 auto; font-size:35px; font-weight: 700; text-transform: uppercase;}
h3#servtitlesmall{ color: #fff; text-align: center; width: 90%; margin: 0 auto; font-size:75px; font-weight: 900; text-transform: uppercase;}
.contentservicios{width: 96%; margin:0 auto; text-align: center; display: inline-block; }
p#desc_servicios{ width: 100%; max-width: 900px; color: #fff; text-align: justify; font-size: 16px; font-weight: 100; margin: 30px auto 0 auto; display: inline-block;}
p#desc_servicios span{ font-weight: 500}
#content_services{ width: 100%; max-width: 1350px; min-height: 300px; background-color: rgba(0,0,0,.1); margin: 30px auto}
.servicios{ width: 217px; height: 194px; background-color: #fff; display: inline-block; cursor: pointer; overflow: hidden; margin: 5px 5px 0px 0px}
.servicios img.imagendeserv{ width: 217px; position: absolute; display: block;}
.servicios img.titleservicios{ width: 217px; position: absolute; display: block; margin-top: 156px; vertical-align: middle; z-index: 10}
.servicios span{height: 100%; position: relative; background-color: #fff; left: -100%; display: block; -webkit-transition: left .3s; transition: left .3s;}
.servicios span p{ width: 90%; text-align: justify; padding: 20px; box-sizing: border-box; display: inline-block; font-size: 13px}
.servicios:hover > span{ left: 0; -webkit-transition: left .3s; transition: left .3s;}
#contactanos{ width: 300px; margin: 0 auto; color: #fff; background-color: #ffc600; font-size: 30px; font-weight: 900; padding: 10px 30px; border: none; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; text-transform: uppercase; cursor: pointer;}
#contactanos:hover{background-color: #E08D22;}
/*
Proyectos
_____________*/
section#Proyectos{ width: 100%; min-height: 600px; text-align: center;}
.contentproyectos{ width: 100%; background-color: #262a33; display: inline-block;}
#content_proyectos{ width: 90%; max-width: 1350px; min-height: 300px;/* background-color: rgba(0,0,0,.1); */margin: 30px auto; display: inline-block;}
.proyectos{ width: 33.333%; height: auto; background-color: #fff; display: inline-block; cursor: pointer; /*overflow: hidden;*/ margin: 5px 5px 0px 0px; vertical-align: top}
.proyectos img.imagenproy{ width: 100%; display: block; float: left;}
.proyectos img.titleproy{ width: 100%; display: block; z-index: 10}
.proyectos span{height: 100%; float: left; background-color: #fff; left: -100%; float: left; display: inline-block; -webkit-transition: left .3s; transition: left .3s;}
#trayectoria{ width: 80%; display: inline-block; min-height: 200px; margin-top: 30px; text-align: center; margin: 30px auto;}
#trayectoria h3{ color: #ffc600; font-weight: 700; width: 90%; text-align: left; margin: 0 auto; font-size: 30px;}
#trayectoria p{ color: #fff; font-weight: 100; width: 90%; text-align: justify; margin: 0 auto; margin-top: 20px; font-size: 18px;}
#clientes{ width: 80%; display: inline-block; min-height: 200px; margin-top: 30px; text-align: center; margin: 30px auto;}
#clientes h3{ color: #ffc600; font-weight: 700; width: 90%; text-align: left; margin: 0 auto; font-size: 20px;}
#clientes img{ display: inline-block; height: 45px; margin: 5px 10px}
/* Footer */
footer{ width: 100%; min-height: 50px; background-color:#fff; color: #262a33; font-family: 'Roboto'; padding-bottom:10px; border-top: solid 3px #ffc600;}
footer a{ color: #262a33}
footer a:hover{ color: #262a33; text-decoration: none;}
.content_footer{ width: 80%; margin: 0 auto; border-bottom: dotted 2px #000; padding: 20px 0; font-family: 'Roboto'; font-weight: 500}
.content_footer div{ width: 200px; margin: 0 auto; text-align: center;}
.content_footer div span img{ vertical-align: middle;}
#textofooter{ width: 90%; font-size: 11px; text-align: center; margin: 0 auto; font-weight: 500; margin-top: 10px;}
/*____________
Contactanos
__________________________*/
section#contacto{ width: 100%; min-height: 600px; text-align: center;background-color: #fff; }
p.descripcioncontactos{ width: 90%; font-weight: 300; font-size: 18px; margin: 20px auto; display: inline-block;}
.contentcontacto{ width: 100%; display: inline-block; fon}
.contenedor_datos_form{max-width: 1200px; width: 100%; margin: 0 auto; display: inline-block;}
form#formulario_contacto{ width: 65%; text-align: center; margin: 0 auto; float: left; padding-bottom: 30px;}
input, textarea{ width: 90%; padding: 8px 1%; font-size: 14px; font-weight: 300; color: #262a33; margin-top: 20px; box-sizing:border-box; border:none; border-bottom: solid 2px #262a33; }
textarea {height: 90px; resize:none;}
label.label_contacto{ font-family: 'Roboto'; font-weight: 100; font-size: 12px; color: #eb008a; text-align: left; width: 85%; display: inline-block; margin-top: 8px;}
button[type=submit]{ width:200px; padding: 8px; text-align: center; color: #fff; cursor: pointer; background-color: #262a33; border: none; margin-top: 10px; text-transform: uppercase; font-size: 18px; font-weight: 500;}
::-webkit-input-placeholder {
font-family: 'Roboto'; font-weight: 700; text-transform: uppercase; color: #0e6ba9; font-size: 14px;}
:-moz-placeholder { /* Firefox 18- */
font-family: 'Roboto'; font-weight: 700; text-transform: uppercase; color: #0e6ba9; font-size: 14px;}
::-moz-placeholder { /* Firefox 19+ */
font-family: 'Roboto'; font-weight: 700; text-transform: uppercase; color: #0e6ba9; font-size: 14px;}
:-ms-input-placeholder {
font-family: 'Roboto'; font-weight: 700; text-transform: uppercase; color: #0e6ba9; font-size: 14px;}
.contenedordatos{ width: 30%; text-align: center; margin: 0 auto; float: left; padding-bottom: 30px; padding: 15px 15px 15px 15px; box-sizing: border-box; margin-top: 20px; background-color: #262a33}
.contenedordatos h4{color: #ffc600; font-size: 18px; font-weight: 700; text-align: left; margin-top: 20px; }
.contenedordatos p{color: #fff; font-size: 14px; font-weight: 300; text-align: justify; padding-left: 10px; margin-top: 5px; padding-bottom: 3px; border-bottom: solid 1px #ffc600; }
.contenedordatos div{ width: 100%; height: auto; background: #ffc600; box-sizing:border-box; padding: 2px; margin-top: 10px; transition: background-color .3s;}
.contenedordatos div h4{color: #262a33; font-size: 16px; font-weight: 700; text-align: center; margin-top: 5px; }
.contenedordatos div p{color: #262a33; font-size: 12px; font-weight: 700; text-align: center; padding-left: 10px; margin-top: 5px; padding-bottom: 3px; border-bottom: none; }
#webcramex:hover{ background-color: #fff; transition: background-color .3s;}
#webcramex:hover > h4#visite {color: #262a33}
#webcramex:hover > p {color: #262a33}
div#negro{
position: fixed;
z-index:120;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
}
div#dialogo{
position: fixed;
top:50%;
left:50%;
margin-left: -150px;
margin-top:-200px;
padding-bottom: 15px;
width:300px;
height: auto;
background-color: #ffc600;
border-radius: 3px;
z-index: 121;
}
div#dialogo p{
font-weight: 300;
padding:10px;
padding-top: 20px;
font-size: 16px;
text-align: center;
font-family: 'Roboto';
color: #262a33;}
div#dialogo span{font-family: 'Roboto'; color: #fff; text-align: center; font-weight: 100; font-size: 12px; width: 100%; display: block; margin-bottom: 20px;}
.styled-select option{ color: #EDB6CF;}
.styled-select select {
background: transparent;
width: 100%;
padding: 5px 10% 5px 15px;
border: 0;
height: 30px;
-webkit-appearance: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #003D81;
font-family: 'Roboto';
font-weight: 100;
font-size: 13px;}
.styled-select {
width: 90%;
box-sizing:border-box;
height: 30px;
overflow: hidden;
border: solid 1px #00aca8;
margin-top: 1px;
background: url(../img/select.jpg) no-repeat right #fff;
display: inline-block;}
.titlewindowmap{ text-align: left; font-family: 'Roboto'; font-weight: 700; font-size: 16px; color: #262a33; margin-bottom: 10px;}
#bodyContent p{text-align: justify; margin-bottom: 0 !important; color: #262a33;}
.fancybox-outer, .fancybox-inner, .fancybox-skin {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 5px!important;}
#map{ width: 100%; height: 400px;}
/* Aviso de Privacidad*/
h1#avisotitle{ font-weight: 900; text-transform: uppercase; text-align: center;margin-top: 20px;}
p#aviso_parrafo{font-weight: 300; width: 80%; max-width: 1280px; margin: 30px auto; border-top: solid 3px #000; padding: 2%; text-align: justify; font-size: 13px}
/*_____________
Responsivo
__________________________*/
@media screen and (max-width: 1450px){
.captionimage{ margin-top: 200px ! important}
.captionimage h2.mini_texto1, .captionimage h2.mini_texto2, .captionimage h2.mini_texto3{width: 70%;}
.contentnosotros{ width: 90%; padding: 0 4% 30px 4%;}
.contenedortextoop, .contenedortextoop p{width: 97%;}
.contenedortextoop{ min-height: 200px;}
}
@media screen and (max-width: 1250px){
.captionimage h3.grand_banner1{ font-weight: 100;}
.captionimage h2.mini_texto1 { font-size: 20px;}
.captionimage h2.mini_texto2{ font-size: 40px;}
.captionimage h3.grand_banner2{ font-size: 60px;}
#descripcion_inicio{ min-height: 380px}
.valoresoptions img{ width: 60px;}
.titulosproyectosop h3{ font-size: 20px;}
#content_proyectos{ width: 100%; }
figure figcaption img.full{ width: 50px;}
}
@media screen and (max-width: 980px){
span.captionimage{ margin-top: 200px;}
.captionimage h3.grand_banner1 {font-size: 30px}
.captionimage h2.mini_texto1{ font-size: 16px; text-transform: initial}
.contenedortextoop{ min-height: 220px;}
#historia{ width: 100%; display: block; float: none;}
video#videoctesa{ width: 80%; height: auto; margin: 0 auto; display: block; float: none; margin-top: 30px;}
#trayectoria{ width: 90%; }
#trayectoria h3{ font-size: 25px}
#trayectoria p{ font-size: 16px;}
figure h3{ font-size: 20px;}
}
@media screen and (max-width: 850px){
#menu_cuad{ display: inline-block;}
.content_menu{ display: none;}
.carousel-inner>.item>img{ height: 550px !important; max-width: none !important; width: auto !important}
.captionimage h2.mini_texto3{ font-size: 40px;}
#contenedorMVV{ display: block; text-align: center; padding-top: 0; margin-top: 0;}
.valoresoptions{ margin: 50px auto 0 auto; width: 80%; display: block;}
.contenedortextoop{ min-height: initial; height: auto; padding-bottom: 20px; margin-bottom: 30px;}
h3#nosotrostitlesmall{ font-size: 30px;}
h2#nosotrostitlebig{ font-size: 70px;}
h2#servtitlebig{font-size: 25px}
h3#servtitlesmall{ font-size: 50px}
figure h3{ font-size: 20px;}
figure figcaption img.full{ margin: 40px auto}
}
@media screen and (max-width: 700px){
#descripcion_inicio{ min-height: 430px}
form#formulario_contacto{ width: 100%;}
.contenedordatos{ width: 90%; margin: auto; display: inline-block; float: none; margin-bottom: 30px;}
#map{ height: 300px;}
p.descripcioncontactos{ font-size: 16px}
.gallery_op{ width: 47%;}
}
@media screen and (max-width: 574px){
.servicios {width: 300px; height: 268px;}
.servicios img.imagendeserv{ width: 300px;}
.servicios img.titleservicios{ width: 300px; margin-top: 215px;}
#trayectoria h3{ width: 100%;}
#trayectoria p{ width: 100%; font-size: 14px;}
}
@media screen and (max-width: 550px){
#descripcion_inicio{ min-height: 430px}
h2.titulos_pantallas{ width: 90%; font-size: 50px; text-align: center; padding: 0}
video#videoctesa{ width: 90%; height: auto; margin: 0 auto; display: block; float: none; margin-top: 30px;}
#historia p{ font-size: 14px;}
p#desc_servicios{font-size: 14px;}
h2#nosotrostitlebig{ font-size: 50px;}
}
@media screen and (max-width: 450px){
img.logo_nav{ margin: 10px 0 0 40px;}
#descripcion_inicio{ min-height: 500px}
.captionimage h2.mini_texto3{ font-size: 30px}
.captionimage h3.grand_banner2{font-size: 50px;}
.captionimage h2.mini_texto2{font-size: 30px}
h2.titulos_pantallas{font-size: 40px;}
.valoresoptions{ width: 100%}
.valoresoptions img{ width: 40px;}
#contactanos{ width: auto}
.gallery_op{ width: 80%; margin-top: 20px;}
}
@media screen and (max-width: 400px){
.servicios {width: 230px; height: 206px;}
.servicios img.imagendeserv{ width: 230px;}
.servicios img.titleservicios{ width: 230px; margin-top: 166px;}
p.descripcioncontactos{ text-align: justify; font-size: 15px}
}
@media screen and (max-width: 350px){
#descripcion_inicio{ min-height: 550px}
.contenidoinicio{width: 80%; }
h2#nosotrostitlebig{ font-size: 35px;}
}