body{

    margin: 0 0;
    padding: 0 0;
    font-weight:300;
    background-size: contain;
}

article{
    /*
    font-family: 'Rokkitt', serif;
    font-family: 'Cutive', serif;
    */
    font-family: 'Source Sans Pro', sans-serif;

    }
p{font-size:1.1em;}
a {
  color:#4f4f4f; /*background:white;*/
  text-decoration:none;
  -o-transition:all 400ms ease-in-out;
  -ms-transition:all 400ms ease-in-out;
  -moz-transition:all 400ms ease-in-out;
  -webkit-transition:all 400ms ease-in-out;
  /* ...and now override with proper CSS property */
  transition:all 400ms ease-in-out;
  margin:0px;pading:0px;
}

a:hover { /*color:red; background:yellow;*/
  -o-transition:all 400ms ease-in-out;
  -ms-transition:all 400ms ease-in-out;
  -moz-transition:all 400ms ease-in-out;
  -webkit-transition:all 400ms ease-in-out;
  /* ...and now override with proper CSS property */
  transition:all 400ms ease-in-out;}

a:link  {text-decoration:none; color:#4f4f4f;}
a:visited  {text-decoration:none; color:#4f4f4f;}

.marco{
/*border-top:3px solid #c5c5c5;*/
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#207cca+1,eff6ff+52,ffffff+100 */
background: #207cca; /* Old browsers */
background: -moz-linear-gradient(top, #f5f5f5 1%, #eff6ff 52%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f5f5f5 1%,#eff6ff 52%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f5f5f5 1%,#eff6ff 52%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
padding:10px 3%;
}

.wrapper{text-align: center;}

.wrapper > header {
    margin: 0 0;
    text-align: center;
    padding: 0 0;
}

.header > div {
    margin-top:10% ;
}

.logo-portada{
    /*width: 15%;
    padding-bottom:40px;*/
}
.imgrG:hover,.imgrP:hover,.imgrM:hover{
  opacity: 0.5;

  -webkit-transition: opacity 0.1s ease-in-out;
  -moz-transition:    opacity 0.1s ease-in-out;
  -o-transition:      opacity 0.1s ease-in-out;
  transition:         opacity 0.1s ease-in-out;
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%);
}
.logo-titulo{
    font-size: 250%;
    font-weight:500;
    font-family: 'Syncopate',sans-serif;
    color: #f4f4f4;
}
.logo-descripcion{
    font-size: 150%;
    font-weight: 300;
    padding-bottom:100px;
    color: #b2b2b2;
    font-family: 'Source Sans Pro', sans-serif;
    font-family:'Gloria Hallelujah', cursive;
}
#logoFlecha{
    font-size: 150%;
    cursor: pointer;
    color:#b2b2b2;
}
.logo-menu{
    padding-top: 40px;
    padding-left:50px;
    width: 150px;
}

.header:hover #menuhead {opacity: 1;
    -webkit-transition: opacity 0.7s ease-in-out;
    -moz-transition:    opacity 0.7s ease-in-out;
    -o-transition:      opacity 0.7s ease-in-out;
    transition:         opacity 0.7s ease-in-out;}

.wrapper > section {
    background: url('../createcolor.php?red=255&green=255&blue=255&trans=20') top left repeat,
                url('../createcolor.php?red=0&green=0&blue=0&trans=89') top left repeat;
    min-height: 500px;
    text-align: center;
}

.wrapper > footer{
    color: rgb(221, 221, 227);
    text-align: center;
}

.clear{clear:both;}

.social, .socialP{
    text-align:right;
    display:inline-block;
    float:right;
    margin:25px;
}
.socialP{margin: 5px;}

.headerGroup{
    padding-top:20px;
    clear:both;
    vertical-align: middle;
}


header > div > div > p {
    -webkit-transition: font-size 750ms ease-out;
    -moz-transition: font-size 750ms ease-out;
    transition: font-size 750ms ease-out;
}
.headerGroupText, .headerGroupTextP{
    /*background: url('../images/logo.png') center left no-repeat;*/
    text-align: left;
    font-family: 'Syncopate',sans-serif;
    cursor: default;
}

.headerGroupTextP{
    font-size:20px;
    /*padding:5px;*/
    padding:0 0;
    margin: 0 0;
    border-top: none;
}

.tit{
    text-shadow: 0px 0px 3px rgba(246,245,246,0.9) ;
    color: rgba(246,245,246,0.9);
    display:block;
}

.headerSeparator{
    background: url('../createcolor.php?red=255&green=255&blue=255&trans=90') top left repeat;
    clear:both;
    height: 10px;
}

#menuhead {
    clear:both;
    float:left;
    overflow:hidden;
    width:100%;
    font-family: 'Cabin', sans-serif;
    font-weight: 500;
    opacity: 0.7;
    -webkit-transition: height 2.2s ease-in-out,opacity 1.5s ease-in-out;
    -moz-transition:    height 2.2s ease-in-out,opacity 1.5s ease-in-out;
    -o-transition:      height 2.2s ease-in-out,opacity 1.5s ease-in-out;
    transition:         height 2.2s ease-in-out,opacity 1.5s ease-in-out;
}

#menuhead ul, #menuheadP ul{
    float:right;
    list-style-type:none;
    margin:0 auto;
    padding:0;
    position:relative;
}

#menuheadP {
    clear:both;
    float:left;
    overflow:hidden;
    width:100%;
    background: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    margin:0 auto;
    padding:0 0;
}

#menuhead li a:hover, #menuheadP li a:hover {
    color:#fff;
}

#menuhead li,#menuheadP li{
    background: rgba(0,0,0,0.4);
    float:left;
    position:relative;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    transition:         all .2s ease-in-out;
}

#menuhead li:hover, #menuheadP li:hover {
     background: rgba(0,0,0,0.7);
}

#menuhead li a{
    color: rgb(176, 176, 176);
    color: rgb(200, 200, 200);
    color: rgb(230, 230, 230);
    text-decoration:none;
    display: block;
    padding:20px;
    padding-right:20px;
    padding-left:20px;
    text-transform: uppercase;
}

#menuheadP li a{
    color: rgb(176, 176, 176);
    text-decoration:none;
    display: block;
    text-transform: uppercase;
    padding:10px;
    padding-right:20px;
    padding-left:20px;
}

.encima {background: rgba(188, 0, 0, 0.6);border-radius:5px;color:#fff;text-transform: uppercase;border-bottom-left-radius: 0;border-bottom-right-radius:0;}

.rojo{
  background-color: red;
  border-color: darkred;
}
.azul{
  background-color: blue;
  border-color: darkblue;
}
.verde{
  background-color: green;
  border-color: darkgreen;
}
.amarillo{
  background-color: yellow;
  border-color: darkyellow;
}
.cuadroDiapositiva{
  display:inline-block;
  border-width:20px;
  border-style: solid;
  padding:10px;
  box-sizing: border-box;
  cursor: pointer;
  margin:0 0;
  width:33%;
  height:300px;
}

.elementoDiapositiva,.elementoDiapositivaB,.elementoDiapositivaC,.elementoDiapositivaD{
    display:inline-block;
    border: 1px solid #bebebe;
    padding: 10px;
    margin:20px;
    max-width:370px;
    text-align: center;
    box-sizing: content-box;
    border-radius: 5px;
    cursor: pointer;
    vertical-align: top;
    background-color: rgba(250, 250, 250, 0.95);
}

.elementoDiapositiva{
    border: none;
    -webkit-box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.05);
}

.elementoDiapositivaB{width:250px; /*height: 150px;*/}
.elementoDiapositivaC{width:auto;height:auto;}
.elementoDiapositivaD{width:100px; /*height: 150px;*/}
.elementoDiapositiva:hover,.elementoDiapositivaB:hover,.elementoDiapositivaC:hover,.elementoDiapositivaD:hover{
    -webkit-box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.15);
}
.elementoDiapositiva > header,.elementoDiapositivaB > header,.elementoDiapositivaC > header,.elementoDiapositivaD > header{
    font-family: 'Inconsolata', monospace;
    text-align: left;
    font-weight: 600;
    font-size: 1.1em;
    color: #333;
    text-shadow: 0 0 2px #b2b2b2;
}

.elementoDiapositiva > header {
    -webkit-transition: font-size 150ms ease-in;
    -moz-transition: font-size 150ms ease-in;
    transition: font-size 150ms ease-in;
}

.elementoDiapositiva > p,.elementoDiapositivaB > p,.elementoDiapositivaC > p {
    text-align:justify;
    text-justify: distribute;
    padding:5px;
    text-indent:30px;
    font-size:1.2em;
}

.elementoDiapositiva > div ,.elementoDiapositivaB > div,.elementoDiapositivaC > div,.elementoDiapositivaD > div {
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    padding: 5px;
    background-color:#fff;
}

.elementoDiapositiva > article {
    -webkit-transition: font-size 150ms ease-in;
    -moz-transition: font-size 150ms ease-in;
    transition: font-size 150ms ease-in;}

.elementoDiapositiva > footer {
    height: 40px;
    padding-top:10px;
    font-size: 0.9em;
    text-align:right;
    -webkit-transition: font-size 150ms ease-in;
    -moz-transition: font-size 150ms ease-in;
    transition: font-size 150ms ease-in;}

.elementoDiapositiva:hover > header {
    font-size:1.3em;
    -webkit-transition: font-size 50ms ease-in;
    -moz-transition: font-size 50ms ease-in;
    transition: font-size 50ms ease-in;}
#w2b-StoTop {
    display: none;
    position: fixed;
    bottom: 0px;
    right: 10px;
    z-index: 99;
    text-align:center;
    font-size:4em;
    cursor:pointer;
    color:#444;
    text-decoration:none;
    text-shadow: 0 3px 2px rgba(1,1,1,0.7);
}


#contacto:hover > h1, #design:hover > h1, #servicios:hover  > h1, #mantenimiento:hover  > h1, #quienes:hover  > h4 {
    font-size:3.5em;
    -webkit-transition: font-size 150ms ease-in, font-weight 250ms ease-in;
    -moz-transition: font-size 150ms ease-in, font-weight 250ms ease-in;
    transition: font-size 150ms ease-in, font-weight 250ms ease-in;
}

#contacto > h1, #design > h1, #servicios  > h1, #mantenimiento  > h1, #quienes  > h4 {
    -webkit-transition: font-size 250ms ease-in, font-weight 150ms ease-in;
    -moz-transition: font-size 250ms ease-in, font-weight 150ms ease-in;
    transition: font-size 250ms ease-in, font-weight 150ms ease-in;
    color: #333;
    text-shadow: 0 0 6px #000;
}

#noticia:hover > div{color:black;}

.mapaweb{display:inline;width:100%;}

footer {padding:0 0;margin: 0 0;}

footer nav ul{list-style: none;margin:0 0 0 0;padding-left:20px;}
footer nav li a{/*font-family: gunplay;*/text-transform: uppercase;font-size:0.8em;display: block;}
footer nav li a:hover{color: #fff;}
footer table {width: 100%;color:#fff;}
footer table tr{vertical-align: top;}
footer table td {width: 20%;padding:1em;}


.footer {
    background: url('../createcolor.php?red=20&green=0&blue=0&trans=5');
    padding-top:15px; width: 100%;}

.footer nav{
  display:inline-block;
  vertical-align: top;
  padding-left:5%;
  padding-right:5%;
}

.footer p {
  text-align: left;
  padding:0;
  margin:0;
  color:#fff;
}
.footer nav li a{color:#858585;}

.main h1, .main h4, .main h6 { font-family: 'Syncopate',sans-serif;text-align: left;padding-left:3%;}

.main p{text-align: left;padding-left:5%;}

#web-open-source h6, #web-a-medida h6, #seo h6 {padding:0 0 15px;color:#000;text-shadow:0 0 2px #a8a8a8;}
#web-open-source div, #web-a-medida div, #seo div {text-align: center;}

#web-open-source ul, #web-a-medida ul, #seo ul {
  list-style-type: none;
  padding-left:10px;
}

#web-open-source h3 , #web-a-medida h3, #seo h3{
  font-family: 'Syncopate',sans-serif;
}

#web-open-source li img, #web-a-medida li img, #seo li img {
  float: left;
  margin: 0 15px 0 0;
  width: 100px;
}

#web-open-source li, #web-a-medida li, #seo li {
  padding: 3px 10px;
  overflow: auto;
}

#web-open-source li:hover, #web-a-medida li:hover, #seo li:hover{
  background: #eee;
  cursor: pointer;
}

#seo p {max-width: 630px;}

#cursos p{
    max-width: 300px;
    text-indent: 10px
}

#cabezera{
    background: url('../createcolor.php?red=0&green=0&blue=0&trans=20') top left repeat,
                url('../images/portada/3.png') center center;
    background-size: cover, cover;
    clear:both;
    box-shadow: 0 4px 16px rgba(34,34,34,0.85);
}
#menu-top{
    height:60px;
    background: url('../createcolor.php?red=0&green=0&blue=0&trans=5') top left;
    background-size: contain;
    clear:both;
    display:none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    padding-top:15px;
}

#menu-top a{font-size:13px;}

.menu-peq{
    /*background: url('../images/logobl.png') center left no-repeat;
    background-size: contain;
    background-position:20px;
    */text-align: left;
}
.menu-peq-span{
    color:red;
    margin-left:65px;
    font-size:12px;
    text-transform: uppercase;
    text-align: left;
    padding-top:8px;
    vertical-align: middle;
}

.menu-peq-span-descripcion{
    color:#f5f5f5;
    margin-left:10px;
    font-size:10px;
    text-transform: uppercase;
    text-align: left;
    padding-top:8px;
}

#noticia > div{
    border: none;
    position: absolute;
    bottom:0px;
    right:0;
    color:#c8c8c8;
    padding:2px 10px;
    opacity:0.5;
    font-weight:bold;
    font-size:30px;
    z-index:-1;
}
#noticia > header{
    font-family: 'Syncopate',sans-serif;
    font-weight: 300;
    font-size:20px;
}

#contacto-link{
    border-bottom-left-radius:50%;
    border-top-left-radius:50%;
    position:fixed;
    z-index:10000;
    font-size:2em;
    top:-10px;
    right:-10px;
    padding: 15px 15px 5px 15px;
    background: url('../createcolor.php?red=0&green=0&blue=0&trans=5');
    color:#f5f5f5;
}

#contacto-link:hover {
    color:rgb(200,0,0);
}