@import url(http://fonts.googleapis.com/css?family=Gudea:400,400italic,700);

* {margin:0; padding:0;}

body {font-family:'Gudea', Arial, Helvetica, sans-serif; font-size:12px; background:black;}
a {text-decoration:none;}

#header {width:100%; background:black; border-bottom:0px solid black;}
.topNav {background:black; width:100%; border-bottom:1px solid black;}
.topNav a {display:block; padding:5px 10px; color:#FFF;}
.topNav a:hover {background:#2B445E; transition:background 0.5s ease}

.headingContainer2 {width:1900px; margin:5px auto; }
.heading {color:#FFF; text-align:center;}
.heading h1 {margin-bottom:10px;}
.heading a {color:#00BFFF;}
.heading P {font-size:14px; margin-bottom:20px;}

.download {display:block;}
.btn {margin:0 auto; display:block; padding:10px 30px; border:2px solid #0B292D; font-weight:bold; color:#00BFFF; width:150px; text-align:center; background:#1C3044;}
.btn:hover {background:#00BFFF; color:#FFF; transition:background 0.5s ease-in-out;}

.clearfix:before, .clearfix:after {content: " "; display: table;}  
.clearfix:after {clear:both;}  
.clearfix {*zoom:1;}  

.pull-left {float:left;}
.pull-right {float:right;}

.conta {width:1900px; height:950px; overflow:hidden; position:relative; margin:0px auto; border:0px solid black; background:#000;}
.layer div {position:absolute;}

.background {background:url(../images/fondo_872.jpg); width:1900px; height:950px; }
.edificio {background:url(../images/edificio_872.png); width:1900px; height:950px; }
.edifi {background:url(../images/edificio3872.png); width:1900px; height:950px; }
.ovni{top:100px; left:1650px;}
.minato{top:330px; left:250px;}
.pajaro{top:-22px; left:-164px;}
.robot{top:11px; left:-10px;}
.grass{top:-60px; left:-500px;} 
.capa{
    
}
.capa2{
    display:none;
}
.capa3{
    display:none;
}
.capa4{
    display:none;
}
.capmail{
    display:none;
}

.logo{
    left:180px;
    
}




@media (max-width: 1366px){
    .background {
    background:url(../images/fondo_1366x683.jpg); 
    width:1366px; 
    height:683px; 
    }

.edificio {background:url(../images/edificio_1366x683.png); width:1366px; height:683px; }
.edifi {background:url(../images/edificio2_1366x683.png); width:1366px; height:683px; }
.ovni{top:100px; left:1650px;}
.minato{top:330px; left:250px;}
.pajaro{top:-22px; left:-114px;}
.robot{top:11px; left:-10px;}
.grass{top:-60px; left:-750px;} 

.capa{
    display:none;
}


.capa2{
   display:inherit;
}

.capa3{
    display:none;
}

.capa4{
    display:none;
}

}



@media (max-width: 460px){
    .background {
    background:url(../images/fondo_460x640.jpg); 
    width:413px; 
    height:640px; 
    }

.edificio {background:url(../images/edificio_460x640.png); width:413px; height:640px; }
.edifi {background:url(../images/edificio3_460x640.png); width:413px; height:640px; }
.ovni{top:11px; left:150px; overflow: hidden;}
.minato{top:330px; left:250px;}
.pajaro{top:-52px; left:-60px;}
.robot{top:11px; left:-40px;}
.grass{top:-60px; left:-750px;} 

.capa{
    display:none;
}

.capa2{
   display:none;
}

.capa3{
    display:none;
}

.capa4{
   display:inherit;
}

.capmail{
   display:inherit;
}

.logo{
    left:180px;

}

}

@media (max-width: 360px){
    .background {
    background:url(../images/fondo_360x640.jpg); 
    width:360px; 
    height:640px; 
    }

.edificio {background:url(../images/edificio_360x640.png); width:360px; height:640px; }
.edifi {background:url(../images/edificio3_360x640.png); width:360px; height:640px; }
.ovni{top:11px; left:150px;}
.minato{top:330px; left:250px;}
.pajaro{top:11px; left:-27px;}
.robot{top:11px; left:-40px;}
.grass{top:-60px; left:-750px;} 

.capa{
    display:none;
}

.capa2{
   display:none;
}

.capa4{
   display:none;
}

.capa3{
   display:inherit;
}

.capmail{
   display:inherit;
}

.logo{
    left:150px;
}

}










/*.leaves{top:350px; left:0px;}
.digi{top:350px; left:-37px;}
.diseno{top:50px; left:600px;}
.animacion{top:150px; left:400px;}
.produccion{top:400px; left:1700px;}
.fotografia{top:350px; left:500px;}
.socialmedia{top:400px; left:600px;}
.emarketing{top:50px; left:1600px;}
.editorial{top:100px; left:1000px;}
.identidad{top:450px; left:1200px;}
.ilustracion{top:250px; left:1400px;}*/


/*Version Laptop*/
.conta2 {width:1366px; height:683px; overflow:hidden; position:relative; margin:0px auto; border:0px solid black; background:#000;}

.conta3 {width:360px; height:640px; overflow:hidden; position:relative; margin:0px auto; border:0px solid black; background:#000;}

.conta4 {width:460px; height:640px; overflow:hidden; position:relative; margin:0px auto; border:0px solid black; background:#000;}


/*.edificio2 {background:url(../images/edificio_872.png); width:1280px; height:640px; }
.edifi2 {background:url(../images/edificio3872.png); width:1280px; height:640px; }*/






/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 40%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

@media (max-width: 480px){
  	.modal-content {
    
    width: 90%;
    
}
  }

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}





/* The Close Button */
.close, .close2, .closeservicios, .closeweb, .closesocial, .closepublicitario, .closeilustracion, .closeaudio, .closefotografia, .closeanimacion, .closeeditorial,
.closecommerce, .closedisenio, .closeimpresion, .closemk {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus, .close2:hover, .close2:focus, .closeservicios:hover, .closeservicios:focus, .closeweb:hover, .closeweb:focus, .closesocial:hover,
.closesocial:focus, .closepublicitario:hover, .closepublicitario:focus, .closeilustracion:hover, .closeilustracion:focus, .closeaudio:hover, .closeaudio:focus,
.closefotografia:hover, .closefotografia:focus, .closeanimacion:hover, .closeanimacion:focus, .closeeditorial:hover, .closeeditorial:focus,
.closecommerce:hover, .closecommerce:focus, .closedisenio:hover, .closedisenio:focus, .closeimpresion:hover, .closeimpresion:focus, .closemk:hover, .closemk:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}