/*
Theme Name: Default Programarte
Theme URI: www.programarte.com.co
Author: Programarte SAS
Author URI:  laa@programarte.com.co
Description: Plantilla desarrollada para Programarte SAS
Version: 1.0
.
General comments/License Statement if any.
.
Tags: plantilla, mobile first, responsive
Text Domain: Default_programarte
*/

*{
    margin:0px;
    padding:0px;
}

body{
  font-family: 'Raleway', sans-serif;
  width: 100%;
  height: auto;
}


/*********************** HEADER ***********************/

.tiulo-tema{
  top: 201px;
}
a.container-logo{
  margin: 0 8%;
  min-width: 200px;
  display: table;
}

@media only screen and (max-width:768px){
   a.container-logo{
      margin: 0 auto;
    }
}
img.logotipo{
  margin-top: 12px;
  height: 64px;
}

/** MENU HEADER**/

.sr-text, .screen-reader-text{
  display: none;
}

.container-menu{
  width: 50%;
  padding: 17px;
}
nav.menu-sitio ul{
  list-style: none;
  display: table;
  margin: 0;
  padding: 0;
  width: 100%;
}

nav.menu-sitio ul li a{
  text-align: center;
  padding: 5px 0;
  display: block;
  text-decoration: none;
  /* font-weight: bold; */
  /* text-transform: uppercase; */
  color: #000;
  font-size: 14px;
}

nav.menu-sitio ul li.current_page_item a, nav.menu-sitio ul li.current_page_parent a  {
  border-bottom: 5px solid #a61206;
}

 nav.menu-sitio ul li:hover{
  background-color: #f19f30;
}


@media only screen and (min-width:768px){
  nav.menu-sitio ul li{
    display: table-cell;
    width: 1%;
  }
}

/** REDES SOCIALES HEADER **/
.redes-sociales{
  position: absolute !important;
  left: 86%;
  z-index: 9999;
}

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

  .container-menu{
    width: 100%;
    padding: 0 !important;
  }
  .redes-sociales{
    position: inherit !important;
    z-index: 9999;
  }

}
/* nexux 10, ipdad min */
@media screen and (min-height : 1025px) and (max-height : 1280px) {

  .container-menu{
    width: 100%;
    padding: 0 !important;
  }
  .redes-sociales{
    position: inherit !important;
    z-index: 9999;
  }
  a.container-logo{
     margin: 0 auto;
   }

}
/* IPAD PRO*/
@media screen and (min-height : 1281px) and (max-height : 1366px) {
  .redes-sociales{
    position: absolute !important;
    left: 84%;
    z-index: 9999;
  }
}

nav.sociales ul{
 text-align: center;
 list-style: none;
 padding: 0;
}

nav.sociales ul li{
 position: relative;
 display: inline-block;
  width: 35px;
  height: 35px;
  margin: 0px 3px;
  border-radius: 100px 100px 100px 100px !important;
  background: #ffffff;
  -webkit-box-shadow: 1px 2px 10px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 2px 10px -2px rgba(0,0,0,0.75);
  box-shadow: 1px 2px 10px -2px rgba(0,0,0,0.75);


}

nav.sociales ul li a:before{
 font-family: 'FontAwesome';
 display: inline-block;
 vertical-align: top;
 padding: 0px 5px;
 content: '\f08e';
 font-size: 30px;
 color: #000;
 -webkit-font-smoothing:antialiased;

}

nav.sociales li a[href*="facebook.com"]::before{
  content: '\f09a';
  color: #2e79da;
  font-size: 22px;
}

nav.sociales li a[href*="instagram.com"]::before{
  content: '\f16d';
  color: #d81742;
  font-size: 22px;
}

nav.sociales li a[href*="twitter.com"]::before{
  content: '\f099';
}

nav.sociales li a[href*="pinterest.com"]::before{
  content: '\f231';
}

nav.sociales li a[href*="youtube.com"]::before{
  content: '\f16a';
}


/*********************** REDES SOCIALES FOOTER ***********************/

nav.sociales-footer ul{
 text-align: center;
 list-style: none;
 padding: 0;

}

nav.sociales-footer ul li{
 position: relative;
 display: inline-block;

}

nav.sociales-footer ul li{
  position: relative;
  display: inline-block;
   width: 35px;
   height: 35px;
   margin: 0px 3px;
   border-radius: 100px 100px 100px 100px !important;
   background: #ffffff00;
   border: 2px solid #ffffff;


 }

nav.sociales-footer ul li a:before{
 font-family: 'FontAwesome';
 display: inline-block;
 vertical-align: top;
 padding: 0px 5px;
 content: '\f08e';
 font-size: 30px;
 color: #000;
 -webkit-font-smoothing:antialiased;

}

nav.sociales-footer li a[href*="facebook.com"]::before{
  content: '\f09a';
  color: #fff;
  font-size: 28px;
}
nav.sociales-footer li a[href*="instagram.com"]::before{
  content: '\f16d';
  color: #fff;
  font-size: 22px;
}

nav.sociales-footer li a[href*="twitter.com"]::before{
  content: '\f099';
}

nav.sociales-footer li a[href*="pinterest.com"]::before{
  content: '\f231';
}

nav.sociales-footer li a[href*="youtube.com"]::before{
  content: '\f16a';
}




/*********************** CONTENIDO ***********************/

.contenedor{
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.texto-contenido{
  text-align: center;
}

div.hero{
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 350px;
text-align: center;
margin: 0 auto;
display: table;
position: relative;

}

div.hero::after{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content:'';
  background-color: rgba(0,0,0,0.28);

}

div.hero .contenedor-hero{
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  position: relative;
  width: 100vw;
  z-index: 2;
}

div.prinipal{
  padding: 60px;
  background-color: #fff;
  position: relative;
}
.contenido-paginas p{
  font-size: 18px;
  line-height: 50px;

}

@media only screen and (min-width:768px){
  div.texto-hero{
    width: 80%;
    margin: 0 auto;
  }
}
@media only screen and (min-width:992px){
  div.texto-hero{
    width: 60%;
  }
}


@media only screen and (max-width: 480px) {
  div.prinipal {
      padding: 10px;
      background-color: #fff;
      position: relative;
  }
}

@media only screen and (min-width:768px){
  div.prinipal{
    margin-top: -90px;
  }
}


/*********************** FOOTER ***********************/
footer{
  padding: 50px 0;
  border-top: 1px solid #c1c1c1;
  text-align: center;

}

footer nav ul {
  list-style: none;
}

footer nav ul li{
  display: inline;
}
footer nav ul li:last-child .separador{
   display: none;
}
footer nav ul li a{
   color: #000;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 16px;
   text-decoration: none;
}
footer .ubicacion{
  margin-top: 30px;

}
footer p{
  margin: 0 0 5px 0;
  font-size: 14px;
}
footer  p.copyright{
  margin-top: 20px;
}

img.img-footer{
  height: auto;
  max-width: 100%;
}

.datos-footer{
  margin-top: 10px;
}
.title-footer{
	font-size:20px;
}
.texto-siguenos{
   margin-top: 15px;
    font-size: 20px;
}


/*********************** INDEX PHP***********************/

/** BLOG*/
article.entrada-blog {
  margin-top: 30px;
}

header.informacion-entrda{
  margin-top: 20px;
}
header.informacion-entrda div.fecha{
  background-color: #f19f30;
  float: left;
  width: 70px;
  height: 70px;
  text-align: center;
  padding-top: 5px;
  margin-right: 20px;
}

header.informacion-entrda div.fecha time{
  font-size: 25px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
}

header.informacion-entrda div.fecha time span{
  font-size: 16px;
  display: block;
  clear: both;
  text-transform: uppercase;
  line-height: 7px;
}

header.informacion-entrda .titulo-entrada{
  float: right;
  width: calc(100% - 90px);
}
header.informacion-entrda h2{
  margin: 0;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 700;

}
header.informacion-entrda p.autor{
   text-transform: uppercase;
   color: #505050;
   margin: 0;
  font-family: 'Raleway', sans-serif;

}
p.autor i{
  font-size: 30px;
  color: #f19f30;
}

div.contenido-entrada p{
   margin-bottom: 0;
   line-height: 24px;

}

.boton-blog{
   font-family: 'Raleway', sans-serif;
   font-size: 16px;
   width: auto;
   border-radius: 8px;
   color: #fff;
   padding: 15px 80px;
   margin-top: 20px;
   display: inline-block;
   text-decoration: none;
   background-color: #a61206;
}
.boton-blog:hover{
  background-color: #f19f30
}

ul.lista-comentarios, ul.lista-comentarios ul{
  list-style: none;
}

ul.lista-comentarios li.comment{
    background-color: #e1e1e1;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 20px;
}
ul.lista-comentarios li.comment cite{
  color: #a61206;
  font-size: 20px;
  font-weight: bold;
}

ul.lista-comentarios li.comment .comment-author{
  margin-bottom: 20px;
}

ul.lista-comentarios li.comment a{
   color: #000;
   text-decoration: none;
}

ul.lista-comentarios li.comment ul.children li{
  background-color: white;
  margin-bottom: 15px;
}

.texto-comentario{
  margin-left: 40px;
}
.paginacion{
margin-top: 20px;
background-color: #e1e1e1;
padding: 20px;
display: inline-block;
border-radius: 20px;

}

.paginacion a{
  color: #a61206;
  text-decoration: none;
}

.paginacion a:hover{
  text-decoration: underline;
}
.paginacion .current{
  font-weight: bold;


}

/** SIDEBAR WIDGETS*/
aside.sidebar{
  margin-top: 25px;
}
form.seachform{
  position: relative;
}

form.seachform #seachsubmit{
position: absolute;
top: 0;
right: 0;
width: 42px;
height: 42px;
background-color: #a61206;
text-indent: -9999px;
background-image: url(img/buscador.png);
background-repeat: no-repeat;
background-position: center center;
border: none;
cursor: pointer;
}

form.seachform input{
  width: 100%;
  padding: 10px;
}

aside .widget{
  margin-bottom: 20px;

}
aside .widget h4{
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
}

aside .widget ul{
  list-style: none;
}
aside .widget ul li{
  margin-bottom: 6px;
}
aside .widget ul li a{
color: #000;
text-decoration: none;
}

aside .widget ul li a:hover{
  color:#f19f30;
}


/** COMENTARIOS **/
div.comentarios h3{
  font-weight: 700;
  text-align: center;
}

@media only screen and (min-width:992px){
  div.comentarios{
  width: 60%;
 display: table;

  }
}
div.comentarios form label{
  display: table;
  padding-right: 20px;
  font-weight: bold;
}

div.comentarios form input, div.comentarios form textarea   {
  width: 60%;
}

div.comentarios form input[type="submit"]{
  font-family: 'Raleway', sans-serif;
    font-size: 16px;
    width: 35%;
    border-radius: 8px;
    color: #fff;
    padding: 7px 43px;
    margin-top: 20px;
    text-decoration: none;
    background-color: #a61206;
    cursor: pointer;
    display: block;
    border: none;
}
.boton-blog:hover{
  background-color: #f19f30
}

p.logged-in-as a{
 color:#000;

}


/* si el css del pluguin Avarta Slider no funciona se aplica este codigo */

/* Slider mobile */
@media (min-width: 700px){
.avartanslider-slider-slider_mobile {
    display: none !important;
}
}

@media (max-width: 699px) and (min-width: 100px){
.avartanslider-slider-slider_mobile {
    display: block !important;
}
}

/* Slider home */
@media (min-width: 700px){
.avartanslider-slider-slider_home {
    display: block !important;
}
}

@media (max-width: 699px) and (min-width: 100px){
.avartanslider-slider-slider_home {
    display: none !important;
}
}