﻿/* Propiedades globales */


@font-face {
    font-family: 'Comfortaa';
    src: url('../fonts/Comfortaa-Light.eot');
    src: url('../fonts/Comfortaa-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Comfortaa-Light.woff') format('woff'),
         url('../fonts/Comfortaa-Light.ttf') format('truetype'),
         url('../fonts/Comfortaa_Light.svg#Comfortaa_Light') format('svg');
    font-weight: normal;
    font-style: normal;
}   
@font-face {
    
    font-family:'Space Age';
    src: url('../fonts/space_age.eot');
    src: url('../fonts/space_age.eot?#iefix') format('embedded-opentype'),
         url('../fonts/space_age.woff') format('woff'),
         url('../fonts/space_age.ttf') format('truetype'),
         url('../fonts/space_age.svg#space_age') format('svg');
    font-weight: normal;
    font-style: normal;


}



html, body {font:'Comfortaa', Verdana, Arial; font-size:13px; width:100%; padding:0; margin:0;}

body { 	 
	font-family: 'Comfortaa', Verdana, Arial;
	color:grey;
	min-width:1000px;
	background: #000000;
	
}

.fotopri {position:relative; padding-left:0px;  width:1000px; height:260px}
.ic {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:0 10000% 0 0;overflow:hidden;padding:0}
.main {width:100%; background:url(../images/bg.jpg) center 0 no-repeat;}
.main2 {width:100%; background:url(../images/bg4.jpg) center 0 no-repeat;}
.main3 {width:100%;  background:url(../images/bg4.jpg) center 0 no-repeat;}
/**********************************************************************/

a {text-decoration:none; cursor:pointer; }
a:hover {text-decoration:none;}
a:visited {text-decoration:none;}
.link {color:#003366;}
.link:hover {text-decoration:underline;}

.link-1 {font-size:30px; line-height:36px; color:#dd0a00; font-weight:bold; font-family: 'Comfortaa', Verdana; letter-spacing:-1px; display:inline-block;}
.link-1:hover {color:#fff;}
.cyclio {font-size:20px; line-height:22px; color:aqua; font-family: 'Space Age'; letter-spacing:2px; display:inline-block;}
.cyclio:hover {color:#b30800;}


.boton {font-family: 'Comfortaa'; font-weight:bold; color:#F4FA58; text-align:center; width:130px; height:28px; background:url(../images/boton.jpg) 0 0 no-repeat; background-size: 100%;  z-index:200;}
.titulo{ text-align:center; font-weight:bold; color:white; font-size:1.7rem;letter-spacing: 2px; text-shadow: 4px 4px 3px black;}
.titulo2 {font-weight:bold;color:white; font-family: 'Comfortaa', Verdana; font-size:1.1em; text-shadow: 10px 10px 5px black;}
.titulo3 {color:white;  font-weight:bold; font-family: 'Comfortaa', Verdana; font-size:1.5em; text-shadow: 3px 3px 3px black; float:right; width:auto; margin-bottom:50px; margin-right:25px; position:relative;  top:0px; z-index:999}
.direccion { float:right; box-shadow: 10px 11px 8px #2E2E2E; margin-bottom:-30px; background:url('../images/metal5.jpg') no-repeat;background-size:100% 100%; padding:10px; color:white;  font-weight:bold; font-family: 'Comfortaa', Verdana; font-size:1.5em; text-shadow: 3px 3px 3px black;  width:auto; margin-bottom:50px; margin-right:25px; position:relative;  top:0px; z-index:999}
.titulista { display:block; float:left; margin: 5px; box-shadow: 10px 11px 8px black; margin-bottom:0px; background:url('../images/metal5.jpg') no-repeat;background-size:100% 100%; padding:2px; color:white;  font-weight:bold; font-family: 'Comfortaa', Verdana; font-size:1.5em; text-shadow: 3px 3px 3px black;  width:auto; margin-bottom:0px; margin-right:25px; position:relative;   top:0px; }
.titulo4 {text-align:center;font-weight:bold;color:#F4FA58; font-family: 'Comfortaa', Verdana; font-size:2em; text-shadow: 10px 10px 5px black;}
.titulo5  {text-align:center;font-weight:bold;color:black; font-family: 'Comfortaa', Verdana; font-size:2em; text-shadow: 10px 10px 5px black;}
.marco1 {position:relative; float:left; height:180px; width:134px; background-image:url('../images/marco.jpg'); background-size: 100% 100%; box-shadow: 10px 10px 25px black;}
.marco2 {position:relative; float:left; height:123px; width:206px; background-image:url('../images/marco2.jpg'); background-size: 100% 100%; box-shadow: 10px 10px 25px black;}
.marco3 {position:relative; float:left; margin:5px; height:150px; width:214px; background-image:url('../images/marco3.jpg'); background-size: 100% 100%; box-shadow: 10px 10px 25px black;}
.marco4 {position:relative; float:left; margin:5px; height:209px; width:144px; background-image:url('../images/marco4.jpg'); background-size: 100% 100%; box-shadow: 10px 10px 25px black;}
.marco5 {position:relative; float:left; margin:5px; height:178px; width:222px; background-image:url('../images/marco5.jpg'); background-size: 100% 100%; box-shadow: 10px 10px 25px black;}
.marco6 {position:relative; float:left; margin:5px; height:235px; width:146px; background-image:url('../images/marco6.jpg'); background-size: 100% 100%; box-shadow: 10px 10px 25px black;}

.brillo:hover {box-shadow: 0px 0px 13px 19px rgba(0, 227, 227, 0.7);
-moz-box-shadow: 0px 0px 13px 19px rgba(0, 227, 227, 0.7);
-webkit-box-shadow: 0px 0px 13px 19px rgba(0, 227, 227, 0.7);}


.gallery {
    
    height: 320px;
    width: 410px;
    text-align:center;
    position:relative; 
    margin:167px 50px 0px 557px; 
    background-color:black;
  }
.target {
    
    position: relative;
    
    margin: 0px auto;
    
  }
.target figure img{
    position: relative;
    display:block;
    margin-left:auto;
    margin-right:auto;
   
    height:320px;
  }

.gallery .target {
    opacity: 0;
   
    -webkit-transform: scale(0,0);
       -moz-transform: scale(0,0);
        -ms-transform: scale(0,0);
         -o-transform: scale(0,0);
            transform: scale(1,1);
    -webkit-transition: 1s;
       -moz-transition: 1s;
        -ms-transition: 1s;
         -o-transition: 1s;
            transition: 2s;
  }
.gallery .target:target {
    
    opacity: 1;
    
   
   
    -webkit-transform: scale(1,1);
       -moz-transform: scale(1,1);
        -ms-transform: scale( 1, 1 );
         -o-transform: scale( 1, 1 );
            transform: scale(1,1);
  }


.imagen1{margin:11px 0px 0px 9px; width:116px; height:158px}
.imagen2{margin:9px 0px 0px 8px; width:188px; height:106px}
.imagen3{margin:11px 0px 0px 9px; width:195px; height:128px}
.imagen4{margin:10px 0px 0px 11px; width:123px; height:188px}
.imagen5{margin:14px 0px 0px 12px; width:195px; height:151px}
.imagen6{margin:10px 0px 0px 13px; width:120px; height:214px}
.imagen7{width:1000px; height:150px}

.clr-1{color:PINK}
.clr-2{color:CYAN}
.clr-3{color:AQUA}
.clr-4{color:BLUE}
.clr-5{color:RED}
.clr-6{color:white; text-shadow: 0px 0px 4px #1C1C1C;}
.clr-7{color:black; font-weight:bold;}
}

.text-1 {font-size:18px; line-height:20px; color:white;  text-shadow: 2px 2px 2px black; }
.text-2 { font-weight:bold; font-size:1.3em; line-height:25px; color:#F4FA58; text-shadow: 4px 4px 5px black;}



ul {margin:0; padding:0;list-style-image:none;}
ul.list-1 li {padding:0px 0 0px 14px; line-height:22px; background:url(../images/marker-1.gif) 0 9px no-repeat;}
ul.list-1 li a { font-size:14px; color:#838180; line-height:22px;}
ul.list-1 li a:hover {color:#dd0a00;}

ul.list-2 li {padding:0px 0 0px 1px; line-height:22px; background:url(../images/marker-2.gif) 0 9px no-repeat;}
ul.list-2 li a { font-size:14px; color:#000; line-height:22px;}
ul.list-2 li a:hover {color:#0072ff;}

ul.list-3 li {padding:0px 0 0px 25px;  line-height:28px; }
ul.list-3 li a {font-size:16px; color:white; line-height:25px; font-style:italic;text-shadow: 0px 0px 3px black;}
ul.list-3 li a:hover {color:white;}

/******************************************************************/
.clear {clear:both; line-height:0; font-size:0; width:100%;}
.wrapper {width:100%; overflow:hidden; position:relative}
.wrap {overflow:hidden; position:relative}
.extra-wrap {overflow:hidden;}
.fleft {float:left;}
.fright {float:right;}
.img-indent {float:left; margin:3px 20px 0px 0;}	
.last {margin-right:0px !important;}

.top-1 {margin-top:44px;}
.top-2 {margin-top:13px;}
.top-3 {margin-top:12px;}
.top-4 {margin-top:30px;}
.top-5 {margin-top:22px;}
.top-6 {margin-top:40px;}
.top-7 {margin-top:80px;}


.left-1 {margin-left:13px;}

.bot-0 {padding-bottom:0 !important; margin-bottom:0 !important;}
.bot-1 {padding-bottom:411px;}
.bot-2 {margin-bottom:0px;}

.pad-0 {padding:0px 0px 0px 0px;}
.pad-1 {padding:10px 0px 44px 30px;}
.pad-2 {padding:22px 0 22px 0; margin-top:24px; text-align:center; overflow:hidden;}
.pad-3 {padding:12px 0px 27px 0px;}

.p1 {padding-bottom:22px;}
.p2 {padding-bottom:6px; text-shadow: 3px 3px 2px #000;}
.p3 {padding-bottom:7px;}
.p4 {padding-bottom:13px;}
.p5 {padding-bottom:19px;}
.p6 {padding-bottom:5px;}
.p7 {padding-bottom:12px;}

/*********************************header*************************************/
header {font-family:'Comfortaa'; width:1000px; margin:0 auto; z-index:101;  }

h1 {color: black; margin:87px 0 0 63px; display:inline-block; z-index:100;}
h2 {font-size:2em; font-weight:bold; line-height:50px; color:#fff;  font-family: 'Comfortaa', Verdana; letter-spacing:2px;}
h3 {margin:20px 0 0 10px; display:inline-block; z-index:100;font-size:32px; line-height:50px; color:black;  font-family: 'Comfortaa', Verdana; letter-spacing:4px;}
h4 {text-transform:uppercase; text-shadow:4px 4px 2px #000; margin:20px 0 0 10px; display:inline-block; z-index:100;font-size:28px; line-height:50px; color:white;  font-family: 'Comfortaa', Verdana; letter-spacing:4px;}
h5 {text-shadow:5px 2px 2px #6E6E6E; margin:5px 0 0 10px; z-index:100;font-size:24px; color:#1C1C1C;  font-family: 'Comfortaa', Verdana; letter-spacing:0px;}
h6 {text-shadow:5px 2px 2px #6E6E6E; margin:5px 0 0 10px; z-index:100;font-size:20px; color:Black;  font-family: 'Comfortaa', Verdana; letter-spacing:0px;}
.text-3 { text-align:center; font-size:1.5em; font-weight:bold; color:#fff;  font-family: 'Comfortaa', Verdana; letter-spacing:1px;text-shadow:4px 4px 2px black;}
nav {position:relative; top:0px; z-index:101; margin:0px 0px 0px 0px; height:220px; overflow:hidden; padding:0px;}

ul.menu {margin:5px 0px 0px 43px; display:block;}
ul.menu li {float:left; line-height:22px; margin:12px 25px 0px 0px; }
ul.menu li a {font-size:13px; line-height:28px; font-family: 'Comfortaa', Arial; text-transform:uppercase; text-shadow:2px -2px 2px #000; letter-spacing:1px; }
ul.menu li:hover a , ul.menu li.current a { color:#000;}

/*********************************content*************************************/
#content {width:1000px; margin-top:25px; margin:0 auto; background:url(../images/content-img2.png) 1px bottom no-repeat; }
.art2 {background: url(../images/art.png) 0 0 no-repeat; width:320px; height:159px; margin:0 0 0 -30px;}

.bloque1{   background: url(../images/metal4.jpg); 
            background-size: 100% ;
            background-repeat:repeat-y;
            
            padding:0px; 
            box-shadow:10px 10px 50px black;}
            
.block-1 {background: url(../images/block-1.gif) 0 bottom 100% repeat-x #fff;}
.block-1-shadow { 

box-shadow: 10px 11px 4px rgba(0, 0, 0, 0.8);
background:url(../images/block-1-shadow.jpg) 0 0 repeat-y; 
background-size: 100% 100%; 
padding:18px 30px 0 30px;
}

.block-3-shadow { 

box-shadow: 10px 11px 4px rgba(0, 0, 0, 0.8);
background:url(../images/garaya.jpg) 0 0 repeat-y; padding:8px 5px 0 30px;

background-size: 100% 100%; 
padding:8px 5px 0 30px;
}

.img-border {width: 250px; height:178px; border:#fff 10px solid; box-shadow: 10px 10px 5px black; display:inline-block;}
.sombra-img {box-shadow: 10px 10px 7px #1C1C1C; display:inline-block;}
.box-1 {float:left; margin-right:1.5rem; margin-bottom:3em;}
.box-1 p.text-2 { text-align:center; margin:7px 0px 0px 5px;}

.lists {overflow:hidden; margin-top:12px;}
.lists ul {float:left; width:270px; margin-right:20px;}

.table {width:560px;color:#000; margin-bottom:6px;} 
.table tr {border-top:#d6d6d6 1px solid;}
.table tr th {width:145px; text-align:left; font-weight:bold; padding-bottom:13px;}
.table tr th.last {width:125px;}
.table tr:first-child {border-top:none;}
.table tr td {padding:8px 0 13px 0;}
.table tr td span {display:block;}

.box-2 { float:left; width:270px; margin-right:20px; color:#000;}

/****************************footer************************/
footer { width:100%; position:relative; overflow:hidden; text-align:left; padding:33px 0 30px 0;}

/**********************form**********************/
.map {width:250px; height:300px;  margin-top:8px; }
.map iframe {width:300px; height:300px; }
dl {margin:18px 0px 0 0px;}
dl dt {color:Black;}
dl dd span { color:black;}
dl dd {}
dl dd a {}
dl dd a:hover {}
#form { margin: 7px 0 0px 0px; width:560px; }
#form input {border:#e0e0e1 1px solid; background:#fff; font-size:14px; font-family: Georgia, "Times New Roman", Times, serif; color:#000;padding:3px 10px 5px 10px;outline: medium none;width: 247px; height:17px; float:left; box-shadow: 0 0 3px #c1c1c1;}
#form textarea {border:#e0e0e1 1px solid; background:#fff;font-size:14px; font-family: Georgia, "Times New Roman", Times, serif;color:#000; height: 370px;outline: medium none;overflow: auto;padding: 3px 0px 0px 10px;width: 465px;resize:none;margin:0px 0 0 0;float:left; box-shadow: 0 0 3px #c1c1c1;}
#form label {position:relative;display: block;min-height:35px;}
.btns {text-align:center; margin-left:82px; overflow:hidden;}
.btns a {display:inline-block; margin:0 15px 0 15px;}
#form label strong {float:left; display:inline-block; padding-top:3px; width:82px; color:#000; line-height:20px;} 