/* Valores para el cuerpo 
   Color de fondo, no tiene mucho sentido por la imagen
*/
body {
	background:white;  /* Color de Fondo*/
	font-family: 'Open Sans', sans-serif; /* Familia del Font*/
	font-size:14px;  /* Tamaño del Font */
	font-weight:normal; /* Peso de Cada Letra */
	color:#000000;   /* Color de Letra */
	margin:0;   /* Margen */
}
*{
	margin: 0;
	padding: 0;
}

.load{
	animation: slide 2s;
}
.slider{
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100vh;  
	animation: slide 30s infinite;
}
.contenido{
	color: #fff;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5)
}
.slider2 {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 90vh;
    animation: slide 30s infinite;
}

.load2 {
    animation: slide2 2s;
}
.contenido2 {
    color: #fff;
    width: 100%;
    height: 90vh;
    background-color: rgba(167, 160, 160, 0.09)
}
.principal{
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	letter-spacing: 5px;
	text-align: center;
	font-family: 'Times New Roman', Times, serif;
}
.principal h1{
	font-size: 70px;
	margin-bottom: 20px;
}
.principal p{
	font-size: 20px;
	text-align: center;
}
@keyframes slide {
	0%{
		background-image: url("../img/1.jpg");
	}
	20%{
		background-image: url("../img/1.jpg");
	}
	20.01%{
		background-image: url("../img/2.jpg");
	}
	40%{
		background-image: url("../img/2.jpg");
	}
	40.01%{
		background-image: url("../img/3.jpg");
	}
	60%{
		background-image: url("../img/3.jpg");
	}
	60.01%{
		background-image: url("../img/4.jpg");
	}
	80%{
		background-image: url("../img/4.jpg");
	}
	80.01%{
		background-image: url("../img/5.jpg");
	}
	100%{
		background-image: url("../img/5.jpg");
	}
}


@keyframes slide2 {
    0% {
        background-image: url("../img/1.jpg");
    }

    20% {
        background-image: url("../img/1.jpg");
    }

    20.01% {
        background-image: url("../img/2.jpg");
    }

    40% {
        background-image: url("../img/2.jpg");
    }

    40.01% {
        background-image: url("../img/3.jpg");
    }

    60% {
        background-image: url("../img/3.jpg");
    }

    60.01% {
        background-image: url("../img/4.jpg");
    }

    80% {
        background-image: url("../img/4.jpg");
    }

    80.01% {
        background-image: url("../img/5.jpg");
    }

    100% {
        background-image: url("../img/5.jpg");
    }
}
/* Establece Características de Bienvenidos
   Color Tamaño, Peso Margen Color de 
   Header h1
*/

/* Establece el ancho y margen del Logo */
.logo{
	width:330px;
	margin:0 auto 15px;
	border: 0px solid #fff;
}
/* Valores para agencia digital (we-create) */
.we-create{
	padding:0;
	margin:35px 0 55px;
}
.we-create li{
	display:inline-block; /* desapareci li como lista (el punto) */
	font-family: 'Montserrat',sans-serif;
	font-size:23px;
	font-style: italic;
	color: #bcbcbc;
	text-transform: uppercase;
	font-weight: 400;
	margin:0 5px 0 0;
	padding:0 0 0 15px;
}
.we-create li:first-child{
	background:none;
}

/* link el botón Iniciar */
.link{
	padding:15px 35px;
	background:#6f00ff;
	color:#ff0 !important;
	font-size:16px;
	font-weight:400;
	font-family: 'Montserrat', sans-serif;
	display:inline-block;
	border-radius:13px;
	text-transform:uppercase;
	line-height:25px;
	margin-bottom:20px;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}
/* Cuando el mouse se podiciona sobre el link iniciar */
.link:hover {
	text-decoration:none;
	color:#1ff576 !important;
	background:#fff;
}
/* Una vez que se ha visitado el link */
.link:active, .link:focus {
	background: #1cc576;
	text-decoration:none;
	color:#f00 !important;
}
/* Animación no tendrá mucho efecto aún  */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/***********************************/
/**********     Navigation *********/
/***********************************/
/* Valores para la barra */
.main-nav-outer{
	padding:0px;
	border-bottom:1px solid #dddddd;  /* borde inferior de la barra */
	box-shadow:0 4px 5px -3px #000000; /* Sombra Línea Barra */
	position:relative;
	background:#fff;  /* Color de fondo de la Barra */
}
/* valores para los ul */
.main-nav{
	text-align:center;
	margin:10px 0 0px;
	padding:0;
	list-style:none;
}
/* valores para los li de la barra */
.main-nav li{
	display:inline; /* se despliegan en línea */
	margin:0 1px;
}
/* valores para los a de la barra */
.main-nav li a{
	display:inline-block;
	color:#222222;  /*Color de las Palabras */
	text-transform:uppercase; /* Con Mayusculas */
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	line-height:20px;  /* Ancho de la Barra */
	margin:17px 32px;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}

.main-nav li a:hover{ 
	text-decoration:underline;
    color: #7cc576;
}

.res-nav_{
	line-height:38px;
	font-family: 'FontAwesome';
	font-size:38px;
	text-decoration: none !important;
	color:#777777;
	font-style:normal;
	display:none;
	width:42px;
	height:27px;
	margin:20px auto;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}

.res-nav_click:hover, .res-nav_click:active, .res-nav_click:focus {
	color: #7cc576 !important;
}
/* Logo del centro de la barra */
li.small-logo{
	width: 30px;
	height: 30px;
}
/***********************************/
/**********     Servicios  *********/
/***********************************/
/* Valores para título del Servicio */
h2{
	font-size:34px;
	color:#222222;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
	letter-spacing: -1px;
	margin:0 0 15px 0;
	text-align:center;
	text-transform:uppercase;
}

/* Valores para subtítulo de cada Servicio, 
   bajo el título Servicios 
   */
h6{
	font-size:20px; /* Tamaño del texto */
	color:#888888;  /* Color del texto */
	font-family: 'Open Sans', sans-serif; /* Familia */
	font-weight:400;  /* Peso */
	text-align:center; /* Texto Centrado */
	margin:0 0 60px 0; /* margen  de abajo */
}
/* Valores para título de cada Servicio */
h3{
	font-family: 'Montserrat', sans-serif; /* Familia */
	color:#222222;    /* Color */
	font-size:16px;   /* Tamaño del Texto */
	margin:0 0 15px 0;  /* Margen del título con el Texto */
	text-transform:uppercase; /* Todo con Mayúscula */
	font-weight:400;  /* Peso del objeto */
}
/* Asigna margen padding arriba y abajo
   centrando en la página
*/
.main-section{
	padding:110px 0 110px; /* margen sección arriba y abajo */
	/*border: 0px solid #000*/;
}

/* Separación vertical entre los artículos (Margen)*/
.service-list{
	padding:0 0 0 0;
	/*border: 0px solid #000;*/
	/*font-size:29px; *//* no tiene mucho sentido ya que existe otro interno*/
	margin-bottom:40px; /* separación vertical */
}

/* valores para la columna del icono */
.service-list-col1 .service-icon{
	float:left;  /* costado izquierdo, jugar con right */
	font-family: 'FontAwesome'; /* familia letra */
	font-size: 26px; /* el icono es una letra,
	                  por lo cual le damos tamaño*/
	background-color: #42454a; /* color de fondo */
	position: relative;
	color: white;  /* colo de la letra (icono) */
	text-align: center; /* alineada al centro */
	line-height: 57px; /* alto línea */
	width: 57px;    /* ancho ícono */
	height: 57px;   /* alto ícono */
	-webkit-border-radius: 50%; /* 50% logra un círculo */
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	display: inline-block;
	margin-right: 16px; /* margen entre el ícono y el texto */
/* transition: <propiedad> <duracion> <funcion-tiempo> <retraso>;
    webkit es de chrome
    Los cambios se aplica al ingresary al salir del icono
    background el color de fondo se demore 0.2 seg en cambiar, 
               despues de 0.2s que el mouse este sobre (ease)
    color      el color de icono se demore 0.2 seg en cambiar,
               despues de 0.2 s que el mouse este sobre (ease) 
*/
	transition: background 0.2s ease 0.2s, color 0.2s ease 0.2s;
	-moz-transition: background 0.2s ease 0.2s, color 0.2s ease 0.2s;
	-webkit-transition: background 0.2s ease 0.2s, color 0.2s ease 0.2s;
}
/* Circulo Exterior del icono */
.service-list-col1 .service-icon:after{
	-webkit-border-radius: 50%; /* 50% = circulo */
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	content: "click";  /* Aparece la palabra click */
	height: 100%;      /* alto  100% */
	width: 100%;       /* ancho 100% */
	pointer-events: fill;
	position: absolute;
	box-shadow: 0 0 0 4px #e01414; /* color y ancho del circulo externo */
	-moz-box-shadow: 0 0 0 4px #e01414;
	-webkit-box-shadow: 10 10 10 14px #e01414;
	left: -7px;   /* x a partir del centro */
	top: -7px;    /* y a partir del centro */
	padding: 7px;
	opacity: 0; /* no se ve hasta cuando el mouse esta sobre el ícono */
	filter: alpha(opacity=0);
	transform: scale(0.8);
	-moz-transform: scale(0.8);
	-webkit-transform: scale(0.8); /* scala del circulo (tamaño)*/
	transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
	-moz-transition: -moz-transform 0.2s ease 0s, opacity 0.2s ease 0s;
	/* cuanto se demora la trasnformación y opacity*/
	-webkit-transition: -webkit-transform 0.2s ease 0s, opacity 0.2s ease 0s;
	/* Utiliza el box del padre */
	 box-sizing: content-box;
	 -moz-box-sizing: content-box;
	 -webkit-box-sizing: content-box;
}
/* cuando el mouse se pone sobre el icono */
.service-list-col1:hover .service-icon:after {
  opacity: 1;
  filter: alpha(opacity=100);
  transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
}
/* Cuando el Mouse se coloca sobre el icono */
.service-list-col1:hover .service-icon{
		color: yellow; /* Color Icono */
		background: #e01414; /* Color background */
}

/* Valore columna 2 Texto */
.service-list-col2{
	/* NO mezcla el espacio del icono con col2 texto */
	/*overflow:hidden;*/ /* jugar con este valor */
	padding:10 10 10 10;	
	border: 0px solid #000;
	margin-left:3px;  /* margen izquierdo */
	text-align:justify; /* texto justificado */
}

/* Tamaño de letra de todos los parrafos */
p{
	font-size:16px;
	line-height:24px;
	margin:0;
	text-align:justify;
}
/**********     Feature    *********/
/***********************************/

.main-section.alabaster{
	background:#fafafa; /* Color de fondo */
}
.featured-work{
	font-size:14px; /* Letra por defecto */
}

.featured-work h2{
	text-align:left; /* Titulo de la sección */
}
.featured-work p.padding-b{
	padding-bottom:15px; /* margen entre el título y los artículos */
}
.featured-box-col1{
	width:60px;  /* ancho del ícono */
	float:left; /* si cambiamos por right 
	             el ícono sale al costado derecho*/
}

.featured-box{
	padding:0 0 0 0;
	margin-bottom:25px; /* margen entre los artículos */
	font-size:14px;  /* tamaño de letra */
}
.featured-box h3{
	margin-bottom:15px; /* espacio entre el título y el texto */
}
.featured-box p{
	line-height:22px; /* alto de línea */
}
/* Observe que antes de esta línea los iconos no salen 
   cuando le especificamos la familia FontAwesone
   entonces recién salen
*/
/* para los <i> */
.featured-box-col1 i{
	display:block;
	line-height:38px;     /* Tamaño de la línea */
	font-family: 'FontAwesome'; /* familia de la imagen */
	font-size:38px;   /* Tamaño del ícono */
	color:#777777;    /* Color del ícono */
	font-style:normal;
}
/* hace que el espacio vertical del icono 
   no se mezcle con el espacio del texto*/
.featured-box-col2{ overflow:hidden;}

.Learn-More{
	display:inline-block;
	color:#7cc576;   /* Color */
	padding:0 5px 0 0;
	font-size:16px;  /* Tamaño de letra */
	/*text-transform:uppercase;*/
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	line-height:24px; /* alto de la línea */
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	/* todas las transiciones en0,3 seg */
	-webkit-transition:all 0.3s ease-in-out;
}
.Learn-More i{ 
	padding-right:15px;
}
/* cuando el mouse este sobre el texto */
.Learn-More:hover, .Learn-More:focus{ 
	text-decoration:none;
	color: #111; /* cambia de color */
}
/***********************************/
/**********     Portafolio *********/
/***********************************/

.main-section.paddind{
	padding-bottom:60px; /* Margen de la sección */
}
.portfolioContainer{
	max-width: 1140px; /* ancho máximo */
}
/* Barra Nav*/
.Portfolio-nav{
	padding:0;
	margin:0 0 45px 0;
	list-style:none;
	text-align:center;
}
/* Barra Nav en una misma línea */
.Portfolio-nav li{
	margin:0 10px; /* margen */
	display:inline; /* despliegue en línea */
}
/* Barra Nav con similar a un botón */
.Portfolio-nav li a{
	display:inline-block;
	padding:10px 22px;
	font-size:12px; /* tamaño de letra */
	line-height:20px; /* alto de la línea */
	color:#222222;  /* color de la letra */
	border-radius:5px;  /* borde redondo */
	text-transform:uppercase; /* todo con mayuscula*/
	font-family: 'Montserrat', sans-serif;
	background:#f7f7f7; /* color de fondo */
	margin-bottom:5px; /* margen inferior de la barra*/
	/* transición*/
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}
/* cuando el mouse se coloca sobre el objeto */
.Portfolio-nav li a:hover{
	background:#7cc576; /* color de fondo */
	color:#fff;     /* color de la letra */
	text-decoration:none; /*decoracion */
}
.portfolioContainer{
	margin:0 auto;
	padding-left:15px;  /* margen izquierdo del container */
}
/* valores de cada box(Marco de Foto) */
.Portfolio-box{
	text-align:center; /* texto centrado bajo la imagen*/
	margin-bottom:30px; /* margen inferior cuando cambia de línea*/
	width:350px;    /* ancho de cada foto */
	height:350px;   /* alto de la imagen */
	/*overflow:hidden;*/
	float:left;  /* posición izquierda */
	padding:0;  /* padding 0 */
}
.Portfolio-box p{
	text-align:center; /* texto párrafo centrado bajo la imagen*/
	font-size: 16px;
}
.Portfolio-box a img{
	margin-bottom:25px;/* margen entre la imagen y el texto */
	width: 60%;
	height: 80%;
	/*transicion */
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;	
}
/* cuando el mouse esta el mouse sobre la imagen */
.Portfolio-box img:hover {
	opacity: 0.6; /* cambia la opacidad */
}
/* valores para el li seleccionado */
.Portfolio-nav li a.current{
	background:#7cc576; /* color de fondo */
	color:#fff;   /* color de la letra */
	text-decoration:none;
}
/*img {
   width:100%; 
   height:100%;
} */
/******************************************************/
/***********************************/
/**********     Cliente    *********/
/***********************************/
.client-part{
	background:url(./img/section-bg1.jpg) center center no-repeat;
	  /* cover escalada lo más pequeño posible */
	  /* contain escalada lo más grande posible */
	background-size:cover;
	padding:125px 0;
	text-align:center;
}
/* Icono en la parte superior de la sección */
.quote-right{
	font-family: 'FontAwesome'; /* permite asociar el icono */
	font-style:normal;  /* Estilo */
	width:68px;   /* Ancho */
	height:68px;  /* Alto */
	margin:0 auto;   /* margen */
	border:2px solid #7cc576;  /* Border  circulo */
	border-radius:50%;   /* marco lo transforma en circulo */
	display:block;   /* display */
	line-height:68px; /* alto de la línea */
	text-align:center;  /* centrado */
	font-size:27px;    /* tamaño del icono */
	color:#7cc576;  /* color del icono */
	cursor: pointer;   /* cursor */
	/*Transición del mouse hover */
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}
/* Valores para el ícono cuando el mouse esta sobre el */
.quote-right:hover{
color: #fff;  /* color de la letra ícono */
border: 2px solid yellow;  /* ancho border  y color*/
}

/* texto del párrafo */
.client-part-haead{
	color:#fdfdfd; /* Color */
	font-size:28px;  /* Tamaño de Letra */
	line-height:41px; /* Tamaño de Linea */
	margin:10px 0 0px; /* Margen */
	font-family: 'Open Sans','sans-serif'; /* familia letra */
	font-style: italic;  /* Style de letra */
}
/* Sección Cliente Foto y Textos*/
.client{
	padding:0;
	margin:20px 0 0;
	list-style:none;
	text-align:center;
}
/* Valores para <li> */
.client li{
	display:inline;
	margin:0 15px;
}
/* Valores para Texto <li> <a> */
.client li a{
	display:inline-block;
}
/* Valores de Foto */
.client li a img{
	margin-bottom:15px;
	border-radius:50%;  /* Foto Redonda */
}
/* Cuando el mouse esta sobre <li> <a> y foto*/
.client li a:hover{
	text-decoration:none; /* No Aparecen líneas */
}
/* valores para Harrys Bond*/
.client li a h3{
	color:#ffffff;
}
/* valores para Licencia para soñar */
.client li a span{
	color:#f1f1f1;
}
/* sección logo con color verde de fondo*/
.c-logo-part{
	background:#7cc500;
	padding:25px 0;
    filter: alpha(opacity=60);
}
/* Logo Sección centrada */
.c-logo-part ul{
	padding:0;
	margin:0;
	list-style:none;
	text-align:center;
}
/* Logo Sección li en línea */
.c-logo-part ul li{
	display:inline;
	margin:0 25px;
}
/* Logo Separación entre los logos */
.c-logo-part ul a{
	display:inline-block;
	margin: 0 20px;
}