/*----------------------------------------------------
	1. CSS Reset
------------------------------------------------------*/
* {
	padding:0;
	margin:0;
}
html { font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-rendering: optimizelegibility;
}
body {
	color:#444;
	font-family: 'Work Sans', sans-serif;
	font-weight: 400;
	position:relative;
	background:#ffe600;;
	width:100%;
	height:100%;
	overflow: scroll;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
a {
	text-decoration:none;
	color:#fff;
	outline:none;
}
img {
	max-width:100%;
}


/*----------------------------------------------------
	 2. Document Setup
------------------------------------------------------*/
.wrapper{
	width:100%;
}
.spHeight{
	padding-top:63px;
}
.wrapper.noGap {
	padding-top:0;
}
.noMar{
	margin:0 !important;
}
.noPadd{
	padding:0px !important;
}

 	p{
	font-size:14px;

	font-weight:400;
	padding-bottom:33px;
	margin:0px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	color:#444;
}
h1,.h1{
	font-family: 'Georgia', sans-serif;
	font-size:46px;
	line-height:55px;
	font-weight:400;
	margin:0px;
	padding-bottom:8px;
	display:block;
}
.h1 { margin-bottom: 30px;}
h2{

	font-size:29px;
	color:#fff;
	line-height:57px;

	font-weight:400;
	text-transform:uppercase;
	margin:0px;
}
h3,.h3{
	font-family: 'Georgia', serif;

	font-size:32px;
	line-height:30px;
	padding-bottom:10px;
	font-weight:300;
	margin:0px;
}
h4{
	font-family: 'Georgia', sans-serif;
	font-size:21px;
	line-height:24px;
	padding-bottom:10px;
	font-weight:400;
	margin:0px;
}
h5{
	font-family: 'Georgia', sans-serif;
	font-size:17px;
	color:#372d38;
	line-height:24px;
	padding-bottom:10px;
	font-weight:400;
	margin:0px;
}
.wrapper .media {
	margin-top:0;
}
.heading{
	text-align:center;
	padding-bottom:70px;
}
.heading .container{
	padding-top:0px !important;
	padding-bottom:0px !important;
	padding-right: 15px;
	padding-left: 15px;
}
.heading h2 {
	font-size:14px;
	line-height:40px;
	font-weight:400;
	margin-bottom:10px;
	margin-top:10px;
	letter-spacing:0px;
	display:inline-block;
	position:relative;
	font-weight:bold;
}

.heading h3{
	font-size:18px;
	line-height:30px;
	color:#5b4c5c;
	padding-bottom:0;
	font-weight:300;
	text-transform:none;
	letter-spacing:1px;
}
.heading p{
	line-height:25px;
}

.topmar{
	margin-top:20px;
}

.goleft{ padding-left: 0;}

/*----------------------------------------------------
	3. Header Part
------------------------------------------------------*/
header, #header{
	position:relative;
}
.banner{
	overflow:hidden ;
	margin:0 auto !important;
	background:#000;
	height:100%; background-image:url(../images/periodicos2_xl.jpg); background-size:cover; background-position:center;
}
.patternOverlay {
	background:#372d38;
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
	z-index:9;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
}

.bannerTop{
	width:100%;
	position:relative ;
	left:0;
	top:0px;
	padding-left:20px;
	padding:40px;
	z-index:999 ;
}
.bannerTop .logo{ margin-bottom: 20px;}
.bannerTop ul {float:right}

.bannerText{
	width:100%;
	position:relative ;
	left:0;
	text-align:center;
	margin-top:100px;
	padding-left: 10%;
	padding-right: 10%;
	padding-bottom: 200px;
	z-index:999 ;
}
.bannerText h1{
	line-height:normal;
	font-weight:300;
	font-size: 56px;
	color:#fff;
}
.bannerText .sol{
	background-image:url(../images/img_sol.png);
	background-position:center bottom;
	background-repeat:no-repeat;
	float:left;
}
.bannerText p{
	padding-top:100px;
	background-image:url(../images/flecha1.png);
	background-position:top center;
	background-repeat:no-repeat;
	color:#fff;
	float:right;
	text-align:left;
	margin-bottom: 80px;

}

/*----------------------------------------------------
	4. DATOS
------------------------------------------------------*/
.datos{

	text-align:left;
	margin-top: -80px
}
.datos .container{
	padding-top:0px ;
	padding-bottom:47px ;
}
.datos .h1{ padding-left:25%; }
.datos .heading { background-color:#fff; margin-bottom:40px;}
.datos .heading h2{color:#444;}
.datos .cajas div{  height: 292px; background-color:#535248; color:white; text-align:center; padding-top:100px; margin-top: 00px; background-position:center 30px; background-repeat:no-repeat;}
.datos .cajas div h3 { color:#fff;}
.datos .cajas div .numero{ font-size:50px; font-family:Georgia;}
.datos .cajas .opinion{ background-image:url(../images/caja1.png); background-size: 80px auto; margin-top: 30px}
.datos .cajas .columnistas{background-color:#fff; color:#535248;  ;background-image:url(../images/caja2.png); }
.datos .cajas .cajamedios{background-image:url(../images/caja3.png); margin-top: 30px ;}
.datos .cajas .dias{background-color:#fff;color:#535248;  background-image:url(../images/caja4.png); }

.datos .cajas .columnistas h3, .datos .cajas .dias h3{color:#535248;}



@media screen and (max-width: 970px) {
	.datos .cajas div{ margin-top: 0 !important;}
.datos .h1{ padding-left:0;}
}
/*----------------------------------------------------
	4. CONTEXTO
------------------------------------------------------*/
.contexto{
	background:#fff;
	text-align:left;
}
.contexto .container{
	padding-top:0px ;
	padding-bottom:47px ;

	padding-bottom: 20px;
}
	.contexto img {margin-right: 20px;}

.contexto .heading { margin-bottom:40px;}
.contexto .heading h2{}
.contexto2 { background-color: #535248	; padding-top: 30px; padding-bottom: 30px;}
.contexto2 img{ margin-top: 0px;}
.contexto2 .h1 {color:#fff;}
.contexto2 p {color: #fff;}


.contexto3 {
	background: -webkit-linear-gradient(right, #ffe600 35%, #fff 35%);
	    background: -o-linear-gradient(right, #ffe600 35%, #fff 35%);
	    background: -moz-linear-gradient(right, #ffe600 35%, #fff 35%);
	    background: linear-gradient(to right, #ffe600 35%, #fff 35%);
	padding-top: 50px; padding-bottom: 30px;}
.contexto3 img{ margin-top: 0px;}
.contexto3 .txttable { padding-right: 40px;}

@media screen and (max-width: 768px) {
	.contexto2 ,.contexto2 .container{ padding-right: 0; padding-left: 0;}

}

/*----------------------------------------------------
	5. PIEZAS GENERO
------------------------------------------------------*/
.piezasgenero{

	text-align:left;
	background-image: url(../images/periodicos.jpg);
	background-size: cover;
	position: relative;
	clear: both;
}

.piezasgenero .container{
	padding-top:0px ;
	padding-bottom:47px ;

	padding-bottom: 20px;
}

.piezasgenero .h1{ color:#fff; }
.piezasgenero .heading { margin-bottom:40px; margin-top: 40px;background-color: #fff;}
.piezasgenero .heading h2{ color:#444}
.piezasgenero p {color: #fff;}
.piezasgenero .txttitppal{ position: absolute; background-color: white; top: 250px; right: 0; padding-bottom: 40px;}
.piezasgenero .txttitppal .h1 { color: #444; text-align: left; margin-top: 20px;}
.piezasgenero .txttitppal img { margin-top: -70px}
.piezasgenero .imgwrapper{ padding-left:30px; padding-right: 30px;}
.piezasgenero .txttitppal{ width: calc(50% + 146px); padding-right: calc(50% - 585px)}
@media screen and (max-width: 768px) {
	.piezasgenero .txttitppal{ position: relative; background-color: white; top: 0px; right: 0; padding-bottom: 40px; float: left;}
	.piezasgenero .txttitppal img { margin-top: 30px}
}

/*----------------------------------------------------
	6. MEDIOS
------------------------------------------------------*/
.medios{
	background: -webkit-linear-gradient(right, #fff 50%, #ffe600 50%);
    background: -o-linear-gradient(right, #fff 50%, #ffe600 50%);
    background: -moz-linear-gradient(right, #fff 50%, #ffe600 50%);
    background: linear-gradient(to right, #fff 50%, #ffe600 50%);

	text-align:left;
	position: relative;
	clear: both
}
.medios .container{
	padding-top:0px ;
	padding-bottom:47px ;
	padding-bottom: 20px;
}
.medios .bgmedios{ position: absolute;right: -55px; top:40%}
.medios .colamarilla{ margin-top:  -80px; padding-left: 40px;}
.medios .colimg{ text-align: center; margin-bottom: 30px;}

.medios .heading { margin-bottom:40px;}
.medios2 { background-color: #535248	; padding-top: 30px; padding-bottom: 30px;}
.medios2 img{ margin-top: 0px;}
.medios2 .h1 {color:#fff;}
.medios2 p ,.medios2 td, .medios2 h3 , .medios2 .h3 {color: #fff;}
.medios2 td { min-width: 50px; text-align: center;}
.medios2 .h3 {vertical-align: middle;}
.medios2 td:last-child{ text-align: left; }
@media screen and (max-width: 768px) {
	.medios {background:#fff;}
	.medios2 td:last-child { padding-right: 0;}
	.medios2 ,.medios2 .container{ padding-right: 0; padding-left: 0;}
}
/*----------------------------------------------------
	7. TEMATICA
------------------------------------------------------*/
.tematica { background-color: #fff; background-image: url(../images/arbol.png); background-repeat: no-repeat; background-position: -50px bottom; background-size: 90% auto; padding-bottom: 280px; border-bottom: 50px solid white;}
.tematica .heading { margin-bottom:40px; background-color: #ffe600; }
.tematica .heading  h2{color:#444;;}
@media screen and (max-width: 768px) {
	.tematica { background-color: #fff; background-image: url(../images/arbol.png); background-repeat: no-repeat; background-position: -150px bottom; background-size: 600px auto; padding-bottom: 200px; border-bottom: 50px solid white;}

}
/*----------------------------------------------------
	7. COMPARATIVA
------------------------------------------------------*/
.comparativa { background-color: #fff;  background-repeat: no-repeat;}
.comparativa .heading { margin-bottom:40px; }
.comparativa .txtppal{background-color: #ffe600; margin-top:250px; padding-top:100px; position:relative; padding-bottom:100px; }
.comparativa .txtppal img{ position:absolute; top: -250px;}
.comparativa .heading  h2{}


}

/*----------------------------------------------------
	7. GENERO
------------------------------------------------------*/
.genero { 	background: -webkit-linear-gradient(right, #ffe600 50%, #fff 50%);
    background: -o-linear-gradient(right, #ffe600 50%, #fff 50%);
    background: -moz-linear-gradient(right, #ffe600 50%, #fff 50%);
    background: linear-gradient(to right, #ffe600 50%, #fff 50%);
  text-align:left;
	position: relative;}
	@media screen and (max-width: 768px) {
		.genero { background:#ffe600 ; }
	}
.genero .heading {}
.genero	 .heading  h2{}
	.genero .h1 {margin-top: 10px;}
.genero2 { background-color: #fff; padding-top: 30px; }
.generograf { background-image: url(../images/bg_genero3.png); background-position: top right; background-repeat: no-repeat; background-size: 350px auto;
margin-top: -170px; padding: 500px 0 20px 25%; color:#fff;}
.generograf  .h1{ color: #fff;}
@media screen and (max-width: 768px) {
	.generograf { margin-top: 30px; max-width: 450px;background-position: top center; padding: 500px 5% 20px 15%; background-size: cover;}
	.genero2 ,.genero2 .container{ padding-right: 0; padding-left: 0;}
}
/*----------------------------------------------------
	8. TIPOS PIEZAS
------------------------------------------------------*/
.tipospiezas{

	text-align:left;
	background-image: url(../images/periodicos2.jpg);
	background-size: cover;
	position: relative;
	clear: both;
	padding-bottom: 70px;
}

.tipospiezas .container{
	padding-top:0px ;
	padding-bottom:47px ;

	padding-bottom: 20px;
}

.tipospiezas .h1{ color:#fff; }
.tipospiezas .heading { margin-bottom:40px; margin-top: 40px;background-color: #fff;}
.tipospiezas .heading h2{ color:#444}
.tipospiezas p {color: #fff;}
.tipospiezas .txttitppal{ position: absolute; background-color: white; top: 250px; left: 0; padding-bottom: 40px; text-align: left;}
.tipospiezas .txttitppal p {color: #444}
.tipospiezas .txttitppal .h1 { color: #444; text-align: left;}
.tipospiezas .txttitppal img.subir { margin-top: -30px; margin-bottom: 20px; }
.tipospiezas .segundacol {padding-top: 70px;}
.tipospiezas .imgwrapper{ padding-left:30px; padding-right: 30px;}
.tipospiezas .txttitppal{ width: calc(50% + 146px); padding-left: calc(50% - 585px)}
@media screen and (max-width: 768px) {
	.tipospiezas .txttitppal{ position: relative; float: left; top:0; width: 100%; padding-top: 30px;}
	.tipospiezas .txttitppal img.subir {margin-top: 0;}
	.tipospiezas .segundacol {padding-top: 0px;}

}


/*----------------------------------------------------
	4. PORTADAS
------------------------------------------------------*/
.portadas{
	background:#fff;
	text-align:left;

}
.portadas .container{
	padding-top:0px ;
	padding-bottom:47px ;

	padding-bottom: 20px;
}
.portadas img.imgpos1 { margin-top: 200px;}
.portadas .h1{ font-size:46px; }
.portadas .h3{ font-size:18px; line-height: 22px;}
.portadas .heading { margin-bottom:40px;}
.portadas .heading h2{}
.portadas2 { background-color: #ffe600	; padding-top: 30px; padding-bottom: 30px; border-top: 50px solid white}
.portadas2 img{ margin-top: 0px;}
.portadas2 .h1 {color:#444;}
.portadas2 p {color: #444;}
.portadas2 .mesa { margin-top: -50px; padding: 0 12.5%; }
@media screen and (max-width: 768px) {
	.portadas img.imgpos1 { margin-top: 20px;}
	.portadas2 .mesa { margin-top: 30px; }

	.portadas2 ,.portadas2 .container{ padding-right: 0; padding-left: 0;}
}
/*----------------------------------------------------
	10. METODOLOGIA
------------------------------------------------------*/
#metodologia1 { 	background: -webkit-linear-gradient(right#fff calc(50% + 290px), #535248 calc(50% + 290px));
    background: -o-linear-gradient(right#fff calc(50% + 290px), #535248 calc(50% + 290px));
    background: -moz-linear-gradient(right,#fff calc(50% + 290px), #535248 calc(50% + 290px));
    background: linear-gradient(to right, #fff calc(50% + 290px), #535248 calc(50% + 290px));
  text-align:left;
	position: relative ; clear: both}
	#metodologia2 { 	background: -webkit-linear-gradient(right#fff calc(50% + 290px), #ffe600 calc(50% + 290px));
	    background: -o-linear-gradient(right#fff calc(50% + 290px), #ffe600 calc(50% + 290px));
	    background: -moz-linear-gradient(right,#fff calc(50% + 290px), #ffe600 calc(50% + 290px));
	    background: linear-gradient(to right, #fff calc(50% + 290px), #ffe600 calc(50% + 290px));
	  text-align:left;
		position: relative;}
@media screen and (min-width: 768px) {
	.towhite, .towhite .h1{color: #fff;}
}
.metodologia .heading { margin-bottom: 30px;}
.metodologia	 .heading  h2{}
.metodologia .h1 {margin-top: 10px;}


/*----------------------------------------------------
	 10. Footer Style
------------------------------------------------------*/
.footer{
	background:#525349;
	color: #fff;
}
.footer .container{
	padding:50px 0 0;
}
@media screen and (max-width: 768px) {
	.footer .container{
		padding-left:15px;
		padding-right:15px;
	}
}
.footer h3 { color: #fff; margin-bottom: 10px;}
.footer ul{
	float: left;
	margin-bottom:62px;
	text-align:center;
	list-style-type:none;
}
ul.redes li{
	display:inline-block;
	text-align:center;
	background:#ffff;
	color:#535248;
	line-height:30px;
	margin:0 5px 14px;
	width:30px ;
	height:30px ;

	-webkit-border-radius: 50%;
    border-radius: 50%;
}

ul.redes li:hover{
	background:#1d1d1d ;
}
ul.redesli:hover	a{
	color:#fff;
}

ul.redes li a{
	color:#fff;
	width:30px !important;
	height:30px !important;
}
ul.redes li a i{
	line-height:30px !important;
	color:#535248;
}
ul.redes li.boton{ width:auto;}
ul.redes li.boton { background: transparent}
.btnpdf { border:1px solid #ffe600; border-radius:30px; padding:5px 20px ; color:#fff; background:transparent;  }
.btnpdf:hover { border:1px solid #ffe600; border-radius:30px; padding:5px 20px ; color:#444; background:#ffe600; text-decoration: none;}

.footer p{
	font-weight:300;
}
.footer p:last-child{
	padding-bottom:0px;
}
.gototop ,.gotofirstpage{

	width:40px;
	height:40px;
	border:2px solid #746c75;
	position: fixed;
	bottom: 30px;
	right: 30px;
	text-align: center;
	border-radius: 20px;
}
.gototop{ display: none}
.gototop.visible{ display:inline-block; }
.gotofirstpage{ position: absolute; bottom:130px; left: calc(50% - 50px); z-index: 999; border:2px solid #fff; background-color: rgba(0,0,0,0.5)}
.gototop i,.gotofirstpage i {
	color:#817a82;
	line-height:35px;
}
.gotofirstpage i{  color: #fff}
.gototop:hover, .gotofirstpage:hover{ background-color: #ffe600; border:2px solid #ffe600;}
.gotofirstpage:hover i { color: #444;}

/* Preloader */
#preloader {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff; /* change if the mask should have another color then white */
	z-index:9999999999; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	color:#fff;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(../images/preloader.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}
#status p{text-align:center;}






.dark #header.sticky-header #header-wrap,
#header.sticky-header.dark #header-wrap { border-bottom-color: rgba(255,255,255,0.1) !important; }

#header.transparent-header.dark:not(.sticky-header) #header-wrap { background:#fff !important; border-bottom:1px solid #525349 !important; }
#primary-menu-trigger i { color:#525349; }

#primary-menu .redes { padding:11px 9px 7px 9px; border-left:1px solid #525349; }
#primary-menu .redes li > a { margin:0; padding:0; }
#primary-menu .redes li > a i { color:#fff; background:#525349; border-radius:50%; height:20px; line-height:20px; width:20px; font-size:10px; margin:0; }



#footer .direccion { font-size:14px; }
#footer .direccion p { margin-bottom:20px; }
#footer a:hover{text-decoration: underline; color:#fff}
#footer .redes h4 {  padding:0; margin:0; margin-right:10px; margin-bottom:20px; text-transform:uppercase; font-weight:bold; color:#fff; }

/* ----------------------------------------------------------------------------
	Vídeo
---------------------------------------------------------------------------- */
#videoyoutube .container-fullwidth, #videoyoutube .row { padding:0; margin:0; }


/* ----------------------------------------------------------------------------
	About
---------------------------------------------------------------------------- */
#section-about { background:#ffe600; }
#section-about h3 { font-size:46px; line-height:58px; font-weight:normal; }
span.subrayado { background:url(../images/subrayado-blanco.png) bottom center no-repeat; }
span.subrayado.amarillo { background:url(../images/subrayado-amarillo.png) bottom center no-repeat; }
body h3 span.subrayado{ background-size: auto 15% !important;}

#section-news { background:#525349; padding:70px 0 80px; }



/*---------------------------------------------------------------------------------
	 11. Responsive style
-------------------------------------------------------------------------------*/
/*.container{ width:1170px !important;}
.wrapper,section { min-width: 1170px;}*/
section{ clear: both;}
.container.half, .half{  float:right;}
.txtppal {  color:#444; }
.toright {text-align: right;}
.tomiddle{ vertical-align: middle;}
.txttable{padding:0 12% 0 15px;}
.tdbasic {padding:0 15px 0 15px;}
.smalltext{font-size:12px;}
div.h1{ font-size:46px; }
.txttitppal { text-align: right; font-weight:  bold;}
.titseccion{  background-color:#393a33; box-sizing:content-box; text-align:left; padding-bottom:0;}
td{ vertical-align: top;}

@media screen and (min-width: 1200px) {
	.container.half, .half{width: 375px;}
	.titseccion{ width:187px; padding-left: calc(50% - 375px); }
}
@media screen and (min-width: 768px) {
	.nopadding {
	   padding: 0 !important;

	}
	.titseccion{ width:485px; padding-left: calc(50% - 485px); }
}

@media screen and (max-width: 991px) {
	.container.half, .half{width: 485px;}
	.titseccion{ width:242px; padding-left: calc(50% - 485px);}
	table.makemov td{ display: block; width:100%; float: left}
}
@media screen and (max-width: 768px) {
	div.h1{ font-size:40px; line-height: 45px;}
	.titseccion{ width:80%; padding-left:15px; }
	.gotofirstpage { left: calc(50% - 20px); bottom: 30px;}
}
@media screen and (min-width: 768px) {
	.conForm input.col-sm-6 {
		width: 48.5%;
	}
	.conForm input.col-lg-6 {
		width: 48.5%;
	}
	.navbar.navbar-inverse.navbar-static-top a {
		padding-left:12px;
		padding-right:12px;
	}
	.navbar.navbar-inverse.navbar-static-top a.closeMenu {
		width:28px;
		height:28px;
		top:25px;
	}
	.closeMenu i {
		line-height:25px;
	}
}

@media screen and (max-width: 991px) {
	.container.half, .half{width: 485px;}

	.bannerText h1{
		font-size:65px;
		line-height:71px;
	}
	.bannerText h2{
		font-size:28px;
	}
	.proPic{
		text-align:center;
	}

	.navbar-inverse .navbar-toggle .icon-bar{
		background:#000;
	}
	.navbar-inverse .navbar-toggle:hover .icon-bar,
	.navbar-inverse .navbar-toggle.active .icon-bar{
		background:#fff;
	}
	.navbar-inverse .navbar-toggle.active {
		background-color:#11141c;
	}
}

@media screen and (min-width: 1200px) {
	.container.half, .half{width: 585px;}
	.titseccion{ width:292px; padding-left: calc(50% - 585px); }
	.workYear{
		width:140px;
		height:140px;
		padding-top:50px;
	}

	.education .workYear{
		padding-top:58px;
	}

}





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

	body{
		min-height:700px;
	}
	#header h3{
		font-size: 38px;
	}
	#header h3 span{
		font-size: 16px;
	}

	.abc{
		width:100%;
	}
	.navArea {
		float:none;
	}



}




@media screen and (max-width: 767px) {
	.navbar-wrapper .container,
	.navwrapper .container{
		width:100%;
	}
		.navbar-nav{
		position: absolute;
		width: 100%;
		left: 0;
		color:#fff;
		background:#181a1c;
		text-align:center;
	}
	.nav > li > a {
		display:block;
	}
	.navbar.navbar-inverse.navbar-static-top a:hover{
		background:none;
	}

	.navbar-nav > li{
		float:none;
		display:block;
	}
	.navbar-nav > li> a{
		padding:15px 0 !important;
		color:#fff !important;
	}
	.navbar-nav > li> a:hover{
		background:#000 !important;
	}

	ul.portfolioContainer li.col-xs-6{
		width:49%;
		min-height: 85px;
	}
	.navbar-toggle {
		margin-top: 23px;
	}
	.navbar .container{
		padding:0;
	}
	.isStuck.navbar-wrapper .navArea{
		display:block;
	}
	.navbar-header .navbar-brand{
		float:right;
	}


}


@media screen and (max-width: 767px) {
	.navbar-header{
		display:none;
	}
	.isStuck .navbar-header{
		display:block;
	}
	.workYear{
		margin:0 auto;
	}
	.workDetails .rightArea{
		border-left:none;
	}
	.arrowpart{
		float:none;
		width:100%;
		height:40px;
		background:url(../images/arrow-top.png) no-repeat 50% 100%;
	}
	.education .arrowpart{
		background:url(../images/arrow-top-light.png) no-repeat 50% 100%;
	}
	.exCon{
		margin-left:0px;
	}
	/*.stuckMenu .closeMenu {
		display:none;
		left:10px;
		top:24px !important;
		right:inherit;
	}*/
	.closeMenu,
	.nav-icon{
		display:none;
	}
	.navbar-nav > li {
		display:block;
	}
	ul.navbar-nav li a{
		display:block;
	}
	.navbar.navbar-inverse.navbar-static-top a {
		padding:10px 0;
	}
	.about{
		border-right:none;
		border-bottom:solid 1px #dbdbdb
	}
	.about:nth-child(3n+3){
		border-bottom:none;
	}
	.media {

	}
	.experdate {
		margin:0 auto 40px;
	}
	.conForm .submitBnt {
		width:100%;
	}
}


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

	#wrapper{
		top: 200px !important;
	}

	.upbox{
		transform: translate(0px, -70px);
		-ms-transform: translate(0px, -70px); /* IE 9 */
		-webkit-transform: translate(0px, -70px); /* Safari and Chrome */
	}
	.bannerText {
		padding-top:15px;
		padding-bottom:15px;
	}
	.bannerText h1 {
		font-size: 42px;
		line-height: 48px;
	}
	.bannerText h3 {
		font-size: 28px;
		line-height: normal;
	}
	.bannerText h2 {
		font-size: 18px;
		line-height:24px;
	}
	.aboutus h3 {
		padding-top:20px;
	}
	.expertiesico {
		padding:0;
		border:none;
		text-align:center;
		margin-bottom:30px;
	}
	.expertiesdesc {
		padding:0;
		margin-bottom:50px;
	}
	.skillbar:last-child {
		margin-bottom:0;
	}


}


@media screen and (max-width: 480px) {
	.bannerText h1 {
		font-size:40px;
		line-height: 45px;
	}
	.bannerText h3 {
		font-size:20px;
	}
	.bannerText p {
		font-size:15px;
		padding-bottom:20px;
	}

}


@media screen and (max-width: 400px) {
	#loopedSlider, #newsSlider{
		min-height: 650px;
		height: 100%;
	}
	ul.slides{
		min-height: 600px;
		height: 100%;
	}

	.item{
		width: 19%;
	}
	.item p {
		font-size: 36px;
	}

	.ourservice img{
		width:100%;
	}

	ul.portfolioContainer li.col-xs-6{
		width:100%;
	}

	.bntDownload{
		font-size: 13px;
		padding: 16px 14px;
	}

	.conForm textarea{
		margin-bottom:20px;
	}
	.textGroup{
		display:block;
		padding:0 0 40px 0;
	}

	.nameError,
	.emailError{
		left:0px;
		top:0px;

	}
}

/* navigation dots */
#dot-nav{
	right: 10px;
	top: 50%;
	margin-top: -50px;
	height: 100px;
	z-index: 999;
}

#dot-nav ul {
	list-style: none;
	margin:0;
	padding: 0;
}
#dot-nav li {
	position: relative;
	background-color: #bdc3c7;
	border:3px solid #bdc3c7;
	border-radius: 15px 15px 15px 15px;
	cursor: pointer;
	padding: 5px;
	height: 10px;
	margin: 10px 10px 0px 0px;
	width: 10px;
	vertical-align:bottom;
}
#dot-nav li.active, #dot-nav li:hover {
	background-color: #ffe600;
}

#dot-nav a {
	outline: 0;
	vertical-align:top;
	margin: 0px 0px 0px 25px;
	position: relative;
	top:-5px;
}
.awesome-tooltip + .tooltip > .tooltip-inner {
    /*background-color: #8e44ad;*/
    color: #f5f5f5;
    border: 1px solid #ffe600;
}
.awesome-tooltip + .tooltip.left > .tooltip-arrow{
    top:50%;
    right:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid #ffe600;
}

/* ANIMACIon */

@media screen and (min-width: 1022px) {
  .animation {
    -webkit-transition: all 0.62s ease;
    transition: all 0.62s ease; }
    .animation.delay-1 {
      -webkit-transition-delay: 0.16s;
      transition-delay: 0.16s; }
    .animation.delay-2 {
      -webkit-transition-delay: 0.32s;
      transition-delay: 0.32s; }
    .animation.delay-3 {
      -webkit-transition-delay: 0.48s;
      transition-delay: 0.48s; }
    .animation.delay-4 {
      -webkit-transition-delay: 0.64s;
      transition-delay: 0.64s; }
    .animation.delay-5 {
      -webkit-transition-delay: 0.80s;
      transition-delay: 0.80s; }
    .animation.delay-6 {
      -webkit-transition-delay: 0.96s;
      transition-delay: 0.96s; }
    .animation.delay-7 {
      -webkit-transition-delay: 1.12s;
      transition-delay: 1.12s; }
    .animation.delay-75 {
      -webkit-transition-delay: 1.20s;
      transition-delay: 1.20s; }
    .animation.delay-8 {
      -webkit-transition-delay: 1.28s;
      transition-delay: 1.28s; }
    .animation.delay-85 {
      -webkit-transition-delay: 1.36s;
      transition-delay: 1.36s; }
    .animation.delay-9 {
      -webkit-transition-delay: 1.44s;
      transition-delay: 1.44s; }
    .animation.delay-95 {
      -webkit-transition-delay: 1.52s;
      transition-delay: 1.52s; }
    .animation.delay-10 {
      -webkit-transition-delay: 1.60s;
      transition-delay: 1.60s; }
    .animation.delay-11 {
      -webkit-transition-delay: 1.76s;
      transition-delay: 1.76s; }
    .animation.delay-12 {
      -webkit-transition-delay: 1.92s;
      transition-delay: 1.92s; }
    .animation.fadeLeft {
      opacity: 0;
      -webkit-transform: translateX(160px);
      transform: translateX(160px); }
      .animation.fadeLeft.action {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1; }
    .animation.fadeTop {
      opacity: 0;
      -webkit-transform: translateY(60px);
      transform: translateY(60px); }
      .animation.fadeTop.action {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1; }
    .animation.fadeBottom {
      opacity: 0;
      -webkit-transform: translateY(-60px);
      transform: translateY(-60px); }
      .animation.fadeBottom.action {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1; }
    .animation.fadeLeftMinus {
      opacity: 0;
      -webkit-transform: translateX(60px);
      transform: translateX(60px); }
      .animation.fadeLeftMinus.action {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1; }
    .animation.fadeRightMinus {
      opacity: 0;
      -webkit-transform: translateX(-60px);
      transform: translateX(-60px); }
      .animation.fadeRightMinus.action {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1; }
				.animation.fadeRightBig {
		      opacity: 0;
		      -webkit-transform: translateX(-360px);
		      transform: translateX(-360px); }
		      .animation.fadeRightBig.action {
		        -webkit-transform: translateX(0px);
		        transform: translateX(0px);
		        opacity: 1; }
    .animation.fadeLeftBig {
      opacity: 0;
      -webkit-transform: translateX(360px);
      transform: translateX(360px); }
      .animation.fadeLeftBig.action {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1; }
    .animation.opacity {
      opacity: 0; }
      .animation.opacity.action {
        opacity: 1; }
    .animation.fadeRight {
      opacity: 0;
      -webkit-transform: translateX(-160px);
      transform: translateX(-160px); }
      .animation.fadeRight.action {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1; }
    .animation.rotateRight {
      opacity: 0;
      -webkit-transform: translateX(-160px) rotate(-80deg);
      transform: translateX(-160px) rotate(-80deg); }
      .animation.rotateRight.action {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
        opacity: 1; }
    .animation.scaley {
      opacity: 0;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transform-origin: left;
      transform-origin: left; }
      .animation.scaley.action {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 1; }
    .animation.scaleyLeft {
      opacity: 0;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transform-origin: right;
      transform-origin: right; }
      .animation.scaleyLeft.action {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        opacity: 1; }
    .animation.scalex {
      opacity: 0;
      -webkit-transform: scaleY(0);
      transform: scaleY(0);
      -webkit-transform-origin: top;
      transform-origin: top; }
      .animation.scalex.action {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 1; }
    .animation.scalexTop {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
      -webkit-transform-origin: bottom;
      transform-origin: bottom; }
      .animation.scalexTop.action {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1; }
 }