/*GLOBALS*/
@font-face { font-family: ChelseaMarket; src: url(../fonts/ChelseaMarket-Regular.ttf);}
@font-face { font-family: ChelseaMarket; src: url(../fonts/ChelseaMarket-Regular.otf);}
@font-face { font-family: ChelseaMarket; src: url(../fonts/ChelseaMarket-Regular.eot);}
@font-face { font-family: ChelseaMarket; src: url(../fonts/ChelseaMarket-Regular.svg);}
@font-face { font-family: ChelseaMarket; src: url(../fonts/ChelseaMarket-Regular.woff);}

@font-face { font-family: opensans-regular; src: url(../fonts/opensans-regular-webfont.ttf);}
@font-face { font-family: opensans-regular; src: url(../fonts/opensans-regular-webfont.eot);}
@font-face { font-family: opensans-regular; src: url(../fonts/opensans-regular-webfont.svg);}
@font-face { font-family: opensans-regular; src: url(../fonts/opensans-regular-webfont.woff);}

@font-face { font-family: opensans-semibold; src: url(../fonts/opensans-semibold-webfont.ttf);}
@font-face { font-family: opensans-semibold; src: url(../fonts/opensans-semibold-webfont.eot);}
@font-face { font-family: opensans-semibold; src: url(../fonts/opensans-semibold-webfont.svg);}
@font-face { font-family: opensans-semibold; src: url(../fonts/opensans-semibold-webfont.woff);}

#noticia-modal.modal-dialog{
            width: 850px;
        }
.noticia-articulo{ height: 270px}        
        
.forms-image>figure>img, .forms-image>a>figure>img{width: 160%}
.modal-title{color: #8f1e2b; text-align: center}
.red-globe-list{list-style-image: url('../imgs/red-list.png'); }
.black-globe-list{list-style-image: url('../imgs/black-list.png');}
/*.lacre-list{list-style-image: url('../imgs/lacre-list.png'); }*/
.none{list-style-type: none;}
.red{color: #8F1E2B}
.news-container>div{min-height: 300px; background: url('../imgs/pergamino.png'); background-position: center center; background-size: contain; background-repeat: no-repeat; padding: 0 10px; margin: 10px 0}
.content>article{min-height: 500px}
p {font-size: 12px}
h3{font-weight: bold;}
strong>p{font-size: 14px}
ul.lacre-list>li{font-weight: bold;}
ul.lacre-list>li>ul>li{font-weight: normal;}
.underline{text-decoration: underline;}
body{font-family: ChelseaMarket}
.title, .subtitle{text-align: center; margin-bottom: 40px; margin-top: 20px}
/*END*/



header {position: fixed; background-color: white;}
 .navbar .navbar-header a {padding-top: 25px}
header, header .navbar, .navbar .navbar-header, .navbar .navbar-header a  {height: 100px; transition: all 0.3s ease; z-index: 9999; background-color: white;}
header{color: white; z-index: 9999;}
header .navbar { padding: 0px 220px; box-shadow: 0px 0px 20px rgba(0,0,0,0.3)}
header .navbar .collapse {position: relative; top: 5px}
header .navbar .collapse>ul li a {font-size: 18px; color: #464646; text-decoration: none; transition: all 0.3s ease;}
header .navbar .collapse>ul li a:hover{color: #8E1D1C}
.icon-bar{background-color: black}


header .navbar .navbar-header .navbar-toggle {margin-top: 20px}
.nav > li > a{padding: 20px 8%}
.navbar-collapse.in {width: 110%; left: -5%; background-color: white; text-align: center; }
.navbar-collapse.in>ul>li {border-top: #999 solid 1px; border-bottom: #999 solid 1px; transition: all 0.3s ease;}
.navbar-collapse.in>ul>li:hover{background-color: #999}
.navbar-nav li ul{padding-left: 10px}
.navbar-collapse.in ul li ul li {border-top: none;}
.navbar-nav li ul> li{margin-bottom: 5px; }
.navbar-nav li ul li, .navbar-nav li ul li a{width: 26px; height: 17px}
.navbar-collapse ul li ul li a{display: block;}
.navbar-right{margin-right: 0}
.navbar-header{width: 30%}
.navbar-header figure img {width: 100%; height: auto !important}
.dropdown:hover .dropdown-menu {display: block;}
.dropdown .dropdown-menu {padding: 0px; min-width: 200px}
.dropdown .dropdown-menu li {width: 100%;}
.dropdown .dropdown-menu li a {background-color: white}
.navbar-collapse.in .dropdown .dropdown-menu li:hover,.navbar-collapse.in .dropdown .dropdown-menu li a:hover, .navbar-collapse.in .dropdown .dropdown-menu li a {background-color: #999}
.dropdown .dropdown-menu li a {display: block; width: 100%; text-align: center;}
header .navbar .collapse>ul li ul li a{font-size: 14px}
.brand{width: 35%; float: left; height: 100%}
.brand a{width: 100%; height: 100%}
.brand a figure{width: 100%; height: 100%}
.brand a figure img{width: 100%}
#menu{float: right; position: relative; top: 20%; text-align: right; width: 65%}
#menu li{display: inline-block;}
.navbar-nav{width: 100%; height: 100%}
#menu>div a, #menu>div a figure{ display: inline-block;}
#menu>div{text-align: right; padding: 0; position: relative; top: -15px}
#menu>li{margin: 0 0 0 20px}
#menu>li a, #menu>div a{color: #464646; text-decoration: none;}
#menu>li a{font-size: 1.1vw}
#menu>li a:hover{color: #8D0405}
.dropdown-menu{left: -70px; top:17px}
.dropdown-menu > li > a{padding: 5px 20px}
.content{margin-top: 100px; z-index: 1; min-height: 440px; background-size: contain; background-repeat: no-repeat; position: relative; padding: 0px 220px; background-color: black}
.content>article {margin-left: 0px; margin-right:0px ;background-color: white; padding: 10px 20px}

footer{padding: 20px 220px 20px 220px; background-color: #212121; color: white}
.clearfix{clear: both;}
footer div article:nth-child(1){height: 70px; position: relative;}
footer div article:nth-child(2){ position: relative; top: -10px}
footer div article:nth-child(2) nav a:nth-child(1){position: relative;left: -20px}
footer div article:nth-child(2) nav a:nth-child(2){position: relative;left: -10px}
footer article p{font-family: opensans-regular}
footer article a{width: 70px; height: 70px; }
/*footer article a:nth-child(1){background: url('../imgs/contacto.png'); background-size: 80px 45px; background-repeat: no-repeat; background-position: center center}
footer article a:nth-child(2){background: url('../imgs/login.png');background-size: 45px 64px;background-position: center center; background-repeat:  no-repeat;}
footer article a:nth-child(3){background: url('../imgs/clientes.png');background-size: 74px 56px;background-position: center center; background-repeat:  no-repeat;}
footer article a:nth-child(1):after{content: 'CONTACTO'; color: white; position: absolute; bottom: -20px;  width: 100%; text-align: center; left: 0}
footer article a:nth-child(2):after{content: 'LOGIN'; color: white; position: absolute; bottom: -20px;  width: 100%; text-align: center; left: 0}
footer article a:nth-child(3):after{content: 'CLIENTES'; color: white; position: absolute; bottom: -20px;  width: 100%; text-align: center; left: 0}*/
/*footer div article:nth-child(1) p:nth-child(3){position: absolute; bottom: 0px}*/
#contact-btn{background: url('../imgs/contacto.png'); background-size: 80px 45px; background-repeat: no-repeat; background-position: center center}
#login-btn{background: url('../imgs/login.png');background-size: 45px 64px;background-position: center center; background-repeat:  no-repeat;}
#clientes-btn{background: url('../imgs/clientes.png');background-size: 74px 56px;background-position: center center; background-repeat:  no-repeat;}
#contact-btn:after{content: 'CONTACTO'; color: white; position: absolute; bottom: -20px;  width: 100%; text-align: center; left: 0}
#login-btn:after{content: 'LOGIN'; color: white; position: absolute; bottom: -20px;  width: 100%; text-align: center; left: 0}
#clientes-btn:after{content: 'CLIENTES'; color: white; position: absolute; bottom: -20px;  width: 100%; text-align: center; left: 0}



#home {background: url('../imgs/fondo.png');  background-position: center top; background-repeat: no-repeat; background-size: cover}
#home>div{position: relative; top: 650px; margin-left: 0px; width: 100%}
#home>div article{text-align: center; }
#home>div article h2{font-size: 30px; letter-spacing: 27px; color: #ED1C24; font-weight: bold; text-align: center; width: 100%}

//#start{background: url('../imgs/frame3.png'); background-size: contain}
#start{background: url('../imgs/frame3.png') no-repeat top right; background-size: auto 100%}
#start-l {background: url('../imgs/frame3.png') no-repeat top left; background-size: auto 100%}
#start #envelope, #start #mundo {float: right;}i
#start #firmagrupo {float: left;}
#start article h2 {margin-bottom: 70px; margin-top: 20px; font-family: opensans-semibold}
#start article p {font-size: 16px; margin: 30px 0; font-family: opensans-regular}
#mundo img{position: relative;top: -10px; width: 85%}

#services {background: url('../../Resources/imgs/guarda-servicios.jpg'); background-size: cover; background-repeat: no-repeat;}
#services article {background: url('../../Resources/imgs/trama-relojes.png');  padding: 10px 0px; background-size: 107% 100%; background-color: white}
#services h2{margin: 50px 0; text-align: center; color: red; letter-spacing: 40px}
#services h3, #services strong p{text-align: center;}
#services ul li>ul{margin: 30px 0}
#o{position: relative;}
#o:after{content: " "; background-image: url('../imgs/reloj.png'); position: absolute;top: 25px; left: -25px; width: 76px; height: 161px; z-index: 999; background-repeat: no-repeat;background-size: 100% 100%}
#services .lacre-list>li{  background: url('../imgs/lacre-list.png') no-repeat left top;
  padding: 3px 0px 3px 30px; list-style-type: none;}
#services .lacre-list{padding-left: 15px}
#services .lacre-list ul{padding-left: 25px}

#news {background: url('../imgs/old-papers.jpg'); background-size: contain}
#news article {padding: 5px}
#news h2 {text-align: center;}

#contact {background: url('../imgs/stamps.jpg');}
.contact-image>figure>img, .contact-image>a>figure>img{width: 100%}
#contact>article>div{margin: 50px 0px}
#contact p{font-size: 18px}
#contact a {font-size: 18px; color: #333}

#civil { padding-top: 70px; padding-bottom: 70px; background: url('../imgs/frame1.jpg'); background-size: 100% 108%}
#civil figure#lacre-civil { width: 100px; height: auto; float: right; top: -60px; left: 12px; position: relative;}
#civil figure img {width: 100%; height: auto}
#civil h2{text-align: center; margin-top: 40px; margin-bottom: 20px}
.image-left{float: left; width: 18.8%}
.image-right{float: right;width: 25.8%}
.text-center{float: left; width: 50%; text-align: left;}
.text-big{float: left; width: 80%}
#civil ul li, #comercial ul li{margin-top: 10px; margin-bottom: 10px}

//#comercial {background:url('../imgs/frame2.png'); background-size: 20%}
//#comercial {background:url('../imgs/frame2.png'); background-size: 12.7% 100%}
#comercial{background: url('../imgs/frame2.png') no-repeat top right; background-size: auto 115%}
#comercial-l {background: url('../imgs/frame2.png') no-repeat top left; background-size: auto 115%}
#comercial>article{background-image: url('../imgs/trama-comercio.png'); background-size: cover; background-position: center center; }
#comercial h5{text-align: center;}
#comercial h2{font-size: 26px}

//#international{background: url('../imgs/trama3.png');  background-size: auto 130% }
//#international{background: rgba(0, 0, 0, 0) url("../imgs/trama3.png") repeat scroll 0 0 / auto 130% }
#international{background: url('../imgs/trama3.png') no-repeat top right; background-size: auto 100%}
#international-l {background: url('../imgs/trama3.png') no-repeat top left; background-size: auto 100%}
#international>article{background-image: url('../imgs/mundo.png'); background-size: cover; background-position: center center}
#international p{font-style: 14px}
.center{text-align: center}
#international p {margin: 30px 0}
#international ul li{margin-top: 20px; margin-bottom: 20px}
#international h3{font-size: 17px}

//#forms {background: url('../imgs/frame4.png'); background-size: 20%}
//#forms {background: url('../imgs/frame4.png'); background-size: 12.7% 100%}
#forms{background: url('../imgs/frame4.png') no-repeat top right; background-size: auto 115%}
#forms-l {background: url('../imgs/frame4.png') no-repeat top left; background-size: auto 115%}
#consult label {width: 100px; text-align: right; margin-right: 15px}
#consult input, #consult textarea{width: 40%; border:none; background-color: #f1f1f3; margin-bottom: 10px} 
#consult input:last-child{ width: auto; background-color: #FFB400; color: white; position: relative; left: 47%}
#consult{background-color: white}
#consult form{ margin-top: 50px}
#consult h2{text-align: center;}
.form-title{display: block; width: 500px; margin: 50px auto; text-align: center; border: solid 2px #8F1E2B}
#nav-frame{border: solid 2px  black; text-align: center; width: 80%; margin: auto}
#nav-frame>nav{margin: 8px auto; width: 98%; border: solid 1px black; padding: 5px 0px}
#nav-frame>nav a{padding-top: 5px; padding-bottom: 5px; color: black; text-decoration: none;}
#nav-frame>nav a:nth-child(1){padding-right: 10px; border-right: solid 1px black; }
#nav-frame>nav a:nth-child(2){padding-right: 20px; padding-left: 20px; border-right: solid 1px black; border-left: solid 1px black; }
#nav-frame>nav a:nth-child(3){padding-left: 10px; border-left: solid 1px black}
.form-section ul {text-align: center; padding: 0}
.form-section ul li {list-style: none; margin: 5px 0px}
#forms .pergamino{background: url('../imgs/pergamino2.png'); background-size: 100% 100%; background-position: center center; min-height: 250px; padding: 40px 40px 0px 40px}
.pergamino .arrow, .pergamino figure{display: inline-block;}
 .pergamino figure{width: 36px; height: 30px; margin-left: 5px}
.pergamino figure img{width: 100%; height: auto}
.acceso{min-height: 300px; background: url('../imgs/acceso.png'); background-size: contain; background-repeat: no-repeat; background-position: center center}
.footer-form{margin-top: 30px}
.modal-acceso{ height: 500px; ; background: url('../imgs/acceso_grande.png'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto}
.modal-webmail{ height: 400px; ; background: url('../imgs/candado.png'); background-repeat: no-repeat; background-position: center center; background-size: auto 100%}



/*MODALS*/
//.modal-content, .modal-dialog {min-height: 500px; min-width: 70%; border: none}
.modal-dialog {margin: 130px auto; border: #8F1E2B solid 4px; border-radius: 8px; }
.modal-dialog h4 {text-align: center;}
.modal-footer button {background: url('../imgs/lacre2.png'); background-size: cover; background-position: center center; width: 100px; height: 100px; border: none;}
.caret{margin-left: 0}

#clients{background: url('../imgs/guardas_nuevas/biblioteca.png') no-repeat top right; background-size: auto 100%}
#clients-l {background: url('../imgs/guardas_nuevas/biblioteca.png') no-repeat top left; background-size: auto 100%}
.nav-tabs .active {background-color: #337ab7}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    background-color: transparent;
        border: 0px ;
}   






@media screen and (max-width: 1366px) {
	header .navbar .collapse>ul li a{font-size: 15px}
	#flags{position: absolute; right: 120px; top: 58px; }
	#home>div{position: relative; top: 350px; margin-left: 0px; width: 100%}
	#home>div article h2 {font-size: 22px}
}


@media screen and (max-width: 1200px) {
	header .navbar {padding: 0px 100px}
	footer {padding: 20px 100px}
	.content{padding: 0px 100px}

	header .navbar .collapse>ul li a{font-size: 14px}

	#flags{position: absolute; right: 120px; top: 58px; }
}

@media screen and (max-width: 970px){
	header .navbar {padding: 0px 50px}
	header .navbar .collapse>ul li a {font-size: 15px}
	header .navbar .collapse {top: 15px;}
	header, header .navbar, .navbar .navbar-header, .navbar .navbar-header a  {height: 80px}
	.navbar-nav{margin-top: 0px; margin-bottom: 0px}
	 .navbar .navbar-header a {padding-top: 15px}

	.content{margin-top: 80px; 
                //min-height: 450px; 
                padding: 0px 50px}
	.content>article {padding: 10px 20px}

	footer { padding: 20px 70px 20px 50px}
	#nav-frame{width: 98%}
	.navbar .navbar-header a{z-index: 1;}
	.navbar-toggle{z-index: 2;}

	#flags{top: 51px; right: 70px}

	#o:after{background-image: none;}

    .remove{display: none;}
	.text-center, .text-big{width: 100%; text-align: left;}

	.navbar-nav{margin: 0px 0px}
	#menu {position: absolute; width: 100%; left: 0; top: 0 ; height: auto ; margin: 80px 0; background-color: white; display: none;}
	#menu div, #menu li{top: 0; width: 100%; text-align: center; margin: 0 0 0 0; padding: 10px 0; border-bottom: solid 1px black}
	#menu li a{ font-size: 14px}
	.navbar-toggle{padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; top: 25px; }
}


@media screen and (max-width: 750px){

	.navbar-brand{position: absolute;}
	header .navbar {padding: 0px 50px}
	header .navbar .collapse {top: 0px;}
	footer article {text-align: center;}

//	.content{min-height: 350px}
	.content>article {padding: 10px 10px 10px 20px}

	#home>div article h2{font-size: 18px;
                             font-weight: bold; 
                             letter-spacing: 20px;
                             margin-left: -10px;
        }

	#services h2{ letter-spacing: 20px}
	
	.content h2{font-style: 20px}
	.content h3{font-size: 18px}

	.form-section h2{font-size: 20px}
	.form-section h2 span {width: 85%}

	#nav-frame nav a {padding: 0; display: block; width: 100%; padding: 5px 10px; margin: 10px auto; width: 95%}
	#nav-frame nav a:nth-child(1){border-right: none; border-bottom: solid 1px black; padding: 5px 10px}
	#nav-frame nav a:nth-child(2){border-right: none; border-left: none; border-top: solid 1px black; border-bottom: solid 1px black; }
	#nav-frame nav a:nth-child(3){border-left: none;border-top: solid 1px black}
	
	#flags{right: 40px; z-index: 9;}
        
}	

@media screen and (max-width: 400px) {
    .brand a figure img {
        width: 210%;
    }
    #login_body{                     
            -webkit-transform: scale(0.7); 
            -ms-transform: scale(0.7); 
            -moz-transform: scale(0.7);
            transform: scale(0.7);             
            top: 82px;
            left: -85px;
        }
    #webmail_body{                     
            -webkit-transform: scale(0.9); 
            -ms-transform: scale(0.9); 
            -moz-transform: scale(0.9);
            transform: scale(0.9);             
            top: 10px;
            left: -105px;
        }    
    .red-globe-list{
        margin-right: 10px;
        }    
        #noticia-modal > .modal-dialog{
            width: auto;
        }
    .noticia-articulo{ height: 200px}    
}

.auto{float: left;}

@media screen and (max-width: 1028px) {
	.navbar-nav .dropdown-menu {position: static;float: none;width: auto;margin-top: 0;background-color: transparent;border:0;box-shadow: none;	}
	.navbar-collapse.in ul li ul {padding: 10px 0px}
	.navbar-collapse.in ul li ul li{display: inline-block;}
	.navbar-header {float: none; width: 100% }
	.navbar-toggle {display: block;}
	.navbar-collapse.collapse{display: none;visibility: hidden;	}
	.collapse.in{display: block;visibility: visible;}
	.navbar-header figure {width: 70% !important}
	header .navbar .collapse{top: 0}
	//.content{min-height: 300px}


	
}

@media screen and (min-width: 1028px){
  	.navbar-nav > li {float: left; }
    .navbar-nav {float: left; margin: 0; }
	.navbar-right {float: right !important;margin-right: 0px;}
	
}

@media screen and (min-width: 1367px){
.content{min-height: 745px}
	
}