.event-list {
        display:flex;
		list-style: none;
		font-family: 'Lato', sans-serif;
		margin: 0px;
		padding: 0px;
	}
	.event-list > li {
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 5px rgb(51, 51, 51);
		box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
		padding: 0px;
		margin: 0px 0px 20px;
	}
	.event-list > li > time {
		display: inline-block;
		width: 100%;
		color: rgb(255, 255, 255);
		background-color: rgb(197, 44, 102);
		padding: 5px;
		text-align: center;
		text-transform: uppercase;
	}
	.event-list > li:nth-child(even) > time {
		background-color: rgb(165, 82, 167);
	}
	.event-list > li > time > span {
		display: none;
	}
	.event-list > li > time > .day {
		display: block;
		font-size: 56pt;
		font-weight: 100;
		line-height: 1;
	}
	.event-list > li time > .month {
		display: block;
		font-size: 24pt;
		font-weight: 900;
		line-height: 1;
	}
	.event-list > li > img {
		width: 30%;
	}
	.event-list > li > .info {
		padding-top: 40px;
		text-align: center;
	}
	.event-list > li > .info > .title {
		font-size: 17pt;
		font-weight: 700;
		margin: 0px;
	}
	.event-list > li > .info > .desc {
		font-size: 13pt;
		font-weight: 300;
		margin: 0px;
	}
	.event-list > li > .info > ul,
	.event-list > li > .social > ul {
		display: table;
		list-style: none;
		margin: 10px 0px 0px;
		padding: 0px;
		width: 100%;
		text-align: center;
	}
	.event-list > li > .social > ul {
		margin: 0px;
	}
	.event-list > li > .info > ul > li,
	.event-list > li > .social > ul > li {
		display: table-cell;
		cursor: pointer;
		color: rgb(30, 30, 30);
		font-size: 11pt;
		font-weight: 300;
        padding: 3px 0px;
	}
    .event-list > li > .info > ul > li > a {
		display: block;
		width: 100%;
		color: rgb(30, 30, 30);
		text-decoration: none;
	} 
    .event-list > li > .social > ul > li {    
        padding: 0px;
    }
    .event-list > li > .social > ul > li > a {
        padding: 3px 0px;
	} 
	.event-list > li > .info > ul > li:hover,
	.event-list > li > .social > ul > li:hover {
		color: rgb(30, 30, 30);
		background-color: rgb(200, 200, 200);
	}
	.facebook a,
	.twitter a,
	.google-plus a {
		display: block;
		width: 100%;
		color: rgb(75, 110, 168) !important;
	}
	.twitter a {
		color: rgb(79, 213, 248) !important;
	}
	.google-plus a {
		color: rgb(221, 75, 57) !important;
	}
	.facebook:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(75, 110, 168) !important;
	}
	.twitter:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(79, 213, 248) !important;
	}
	.google-plus:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(221, 75, 57) !important;
	}

	@media (min-width: 768px) {
		.event-list > li {
			position: relative;
			display: block;
			width: 100%;
			height: 120px;
			padding: 0px;
		}
		.event-list > li > time,
		.event-list > li > img  {
			display: inline-block;
		}
		.event-list > li > time,
		.event-list > li > img {
			width: 120px;
			float: left;
		}
		.event-list > li > .info {
			background-color: rgb(245, 245, 245);
			overflow: hidden;
		}
		.event-list > li > time,
		.event-list > li > img {
			width: 120px;
			height: 120px;
			padding: 0px;
			margin: 0px;
		}
		.event-list > li > .info {
			position: relative;
			height: 120px;
			text-align: left;
			padding-right: 40px;
		}	
		.event-list > li > .info > .title, 
		.event-list > li > .info > .desc {
			padding: 0px 10px;
		}
		.event-list > li > .info > ul {
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
		.event-list > li > .social {
			position: absolute;
			top: 0px;
			right: 0px;
			display: block;
			width: 40px;
		}
        .event-list > li > .social > ul {
            border-left: 1px solid rgb(230, 230, 230);
        }
		.event-list > li > .social > ul > li {			
			display: block;
            padding: 0px;
		}
		.event-list > li > .social > ul > li > a {
			display: block;
			width: 40px;
			padding: 10px 0px 9px;
		}
	} 
    
    
    
    /*CODIGO PARA PONER secciones con contornos menu servicios*/
   .letramenuservicio{
    text-align: center;
    padding-top:initial;
    font-size: large;
    font-variant: small-caps;
    animation-direction: alternate-reverse;

    }
.glyphicon-lg{font-size:3em}
.blockquote-box{border-right:5px solid #E6E6E6;margin-bottom:25px}
.blockquote-box .square{/*width:100px;*/min-height:50px;margin-right:22px;text-align:center!important;background-color:#E6E6E6;/*padding:20px 0*/}
.blockquote-box.blockquote-primary{border-color:#357EBD}
.blockquote-box.blockquote-primary .square{background-color:#428BCA;color:#FFF}
.blockquote-box.blockquote-success{border-color:#4CAE4C}
.blockquote-box.blockquote-success .square{background-color:#5CB85C;color:#FFF}
.blockquote-box.blockquote-info{border-color:#46B8DA}
.blockquote-box.blockquote-info .square{background-color:#5BC0DE;color:#FFF}
.blockquote-box.blockquote-warning{border-color:#EEA236}
.blockquote-box.blockquote-warning .square{background-color:#F0AD4E;color:#FFF}
.blockquote-box.blockquote-danger{border-color:#D43F3A}
.blockquote-box.blockquote-danger .square{background-color:#D9534F;color:#FFF}



/*menu defs servicios*/

/* 
Inspired by http://dribbble.com/shots/890759-Ui-Kit-Metro/attachments/97174
*/
*, *:before, *:after {
  /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
  -webkit-box-sizing: border-box; 

  /* Firefox (desktop or Android) 28- */
  -moz-box-sizing: border-box;

  /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
  box-sizing: border-box;
}

.btn-nav {
    background-color: #fff;
    border: 1px solid #e0e1db;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.btn-nav:hover {
    color: #e92d00;
    cursor: pointer;
    -webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
    transition: color 1s;
}
.btn-nav.active {
    color: #e92d00;
    padding: 2px;
	border-top: 6px solid #e92d00;
	border-bottom: 6px solid #e92d00;
    border-left: 0;
    border-right: 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -webkit-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
    -moz-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
    -ms-transition: border 0.3s ease-out, color 0.3s ease 0.5s; /* IE10 is actually unprefixed */
    -o-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
    transition: border 0.3s ease-out, color 0.3s ease 0.5s;
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
.btn-nav.active:before {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 6px 6px 0;
	border-color: #e92d00 transparent;
	display: block;
	width: 0;
	z-index: 1;
	margin-left: -6px;
	top: 0;
	left: 50%;
}
.btn-nav .glyphicon {
    padding-top: 16px;
	font-size: 40px;
}
.btn-nav.active p {
    margin-bottom: 8px;
}
@-webkit-keyframes pulsate {
 50% { color: #000; }
}
@keyframes pulsate {
 50% { color: #000; }
}
@media (max-width: 480px) {
    .btn-group {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}
@media (max-width: 600px) {
    .btn-nav .glyphicon {
        padding-top: 12px;
        font-size: 26px;
    }
}

/*collapse*/

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/*Define Accordion box
El cuadro afuera del acordion*/
.accordion { width:80%; overflow:hidden; margin:0px auto; color:#ffffff; background:#0a69aa; padding:0%; padding-left:2%; padding-right:2%; }

/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target { background:#ffffff; padding:10px;}
.accordion section:target:hover { background:#ffffff; }
.accordion section:target h2 {width:100%;}
.accordion section:target h2 a{ color:#333; padding:0;}
.accordion section:target p {display:block;}
.accordion section h2 a{/*padding:1% 10px;*/display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }

/*set style of closed slide
CUANDO PASAS POR ENCIMAS DE LOS BOTONES*/

.accordion section{ float:left;	overflow:hidden; color:#333; cursor:pointer; background: #3498db; margin:3px; }
.accordion section:hover {background:#f58635;}
.accordion section p {font-size:large; padding-top:inherit; text-align:justify; /*display:none;*/ }
.accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
.accordion section:nth-child(1):after{content:'1';}
.accordion section:nth-child(2):after{content:'2';}
.accordion section:nth-child(3):after{content:'3';}
.accordion section:nth-child(4):after{content:'4';}
.accordion section:nth-child(5):after{content:'5';}
.accordion section:nth-child(6):after{content:'6';}
.accordion section:nth-child(7):after{content:'7';}
.accordion section:nth-child(8):after{content:'8';}
/*End General Accordion****************************************************************************/

/*Horizontal Accordion *********************************************************************/
.horizontal section{ width:5%; height:250px; 
	-moz-transition:width 0.2s ease-out; 
	-webkit-transition:width 0.2s ease-out;
  	-o-transition:width 0.2s ease-out;
	-ms-transition:width 0.2s ease-out;
  	transition:width 0.2s ease-out;
}

/*Position the number of the slide*/
.horizontal section:after{top:140px;left:15px;}

/*Header of closed slide*/
.horizontal section h2 { 
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	width:240px; position:relative; left:-100px; top:85px;
} 

/*On mouse over open slide*/
.horizontal :target{ width:73%;height:230px; }
.horizontal :target h2{ top:0px;left:0;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg); 
}
/*End Horizontal Accordion *********************************************************************/

/*Vertical Accordion *************************************************************************/
.vertical section{ width:100%; height:40px;
	-webkit-transition:height 0.2s ease-out;
	-moz-transition:height 0.2s ease-out;
  	-o-transition:height 0.2s ease-out;
	-ms-transition:height 0.2s ease-out;
  	transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{ height:inherit; width:95%; }

.vertical section h2 { position:relative; left:0; top:-15px; }

/*Set position of the number on the slide*/
.vertical section:after{ top:-60px;left:810px;}
.vertical section:target:after{ left:-9999px;}

/*style param glyphions*/
.box > .icon { text-align: center; position: relative; }
.box > .icon > .image { position: relative; z-index: 2; margin: auto; /*width: 88px;*/ height: 88px; border: 8px solid #0968aa; /*line-height: 88px;*/ border-radius: 50%; background: #0968aa; vertical-align: middle; }
.box > .icon:hover > .image { background: #f58635; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform:rotate(360deg) scale(1.5); -moz-transform:rotate(360deg) scale(1.5); -o-transform:rotate(360deg) scale(1.5); -ms-transform:rotate(360deg) scale(1.5); transform:rotate(360deg) scale(1.5); }
.box > .icon > .image > i { /*font-size: 25px !important;*/ color: #fff !important; }
.box > .icon:hover > .image > i { color: white !important; }
.box > .icon > .info { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0; }
.box > .icon:hover > .info { background: rgba(0, 0, 0, 0.04); border-color: #e0e0e0; color: white; }
.box > .icon > .info > h3.title { font-family: "Roboto",sans-serif !important; font-size: 16px; color: #222; font-weight: 500; }
.box > .icon > .info > p { font-family: "Roboto",sans-serif !important; font-size: 13px; color: #666; line-height: 1.5em; margin: 20px;}
.box > .icon:hover > .info > h3.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { color: #222; }
.box > .icon > .info > .more a { font-family: "Roboto",sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; }
.box > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: #63B76C; }
.box .space { height: 30px; }


/*style param menunuevo*/
 p.navtext {
      font-family:Tahoma;
      color: white;
      font-size: 1.5rem;
    }
    img {
      padding: 5px;
    }
    .company {
      background-color: #16225f;
    }
    .capabilities {
      background-color: #80BD00;
    }
    .branding {
      background-color: #00A1E1;
    }
    .creativelounge {
      background-color: #FC4F00;
    }
    .customercare {
      background-color: #932749;
    }
    .panel-heading {
      background: #000;
    }
    .centered-form{
        margin-top: 60px;
    }
    
    .centered-form .panel{
    	background: #e9e9e9;
    }
    
    /*Circle*/
    .navlinks div {
    	position: relative;
    }
    .navlinks div::before {
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	z-index: 2;
    	display: block;
    	content: '';
    	width: 0;
    	height: 0;
    	background: rgba(255,255,255,.2);
    	-webkit-transform: translate(-50%, -50%);
    	transform: translate(-50%, -50%);
    	opacity: 0;
    }
    .navlinks div:hover::before {
    	-webkit-animation: circle .75s;
    	animation: circle .75s;
    }
    @-webkit-keyframes circle {
    	0% {
    		opacity: 1;
    	}
    	40% {
    		opacity: 1;
    	}
    	100% {
    		width: 120%;
    		height: 120%;
    		opacity: 0;
    	}
    }
    @keyframes circle {
    	0% {
    		opacity: 1;
    	}
    	40% {
    		opacity: 1;
    	}
    	100% {
    		width: 120%;
    		height: 120%;
    		opacity: 0;
    	}
    }


    /*nuevo menu*/
    #container-main{
    margin:40px auto;
    width:95%;
    min-width:320px;
    max-width:960px;
}
 
#container-main h1{
    font-size: 40px;
    text-shadow:4px 4px 5px #16a085;
}
 
.accordion-container {
    width: 100%;
    margin: 0 0 20px;
    clear:both;
}
 
.accordion-titulo {
    /*position: relative; quitar para poner efecto*/
    text-align:-webkit-center;
    display: block;
    padding: 20px;
    font-size: 24px;
    font-weight: 300;
    background: #0968aa;
    color: #ffffff;
    margin-top:-2%;
    text-decoration: none;
}
.accordion-titulo.open {
    background: #f58635;
    color: #fff;
}
.accordion-titulo:hover {
    background: #0968aa;
}
 
.accordion-titulo span.toggle-icon:before {
    content:"+";
    color:#ffffff;
}
 
.accordion-titulo.open span.toggle-icon:before {
    content:"-";
}
 
.accordion-titulo span.toggle-icon {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 38px;
    font-weight:bold;
}
 
.accordion-content {
    display: none;
    padding: 20px;
    /*overflow: auto; codigo para poner un scroll automatico*/
}
.accordion-content p{
    margin:0;
}
 
.accordion-content img {
    display: block;
    float: left;
    margin: 0 15px 10px 0;
    width: 50%;
    height: auto;
}
 
 
@media (max-width: 767px) {
    .accordion-content {
        padding: 10px 0;
    }
    .accordion-titulo{
        font-size:small;
    }
}
@media only screen and (min-width: 342px) and (max-width: 782px) {
    .section-title{
        padding-right:5%;
        padding-left:5%;
    }
    .accordion section p {font-size:12px; padding-top:inherit; text-align:justify; /*display:none;*/ }

    .accordion-titulo {
    /*position: relative; quitar para poner efecto*/
    text-align:-webkit-center;
    display: block;
    padding: 10px;
    font-size: 17px;
    font-weight: 300;
    background: #0968aa;
    color: #ffffff;
    margin-top:-2%;
    text-decoration: none;
     padding-left:23%;
    padding-right:10%;
}
.accordion-titulo.open {
    background: #f58635;
    color: #fff;
}
.accordion-titulo:hover {
    background: #0968aa;
    font-size:small;
}
 
.accordion-titulo span.toggle-icon:before {
    content:"+";
    color:#ffffff;
}
 
.accordion-titulo.open span.toggle-icon:before {
    content:"-";
}
 
.accordion-titulo span.toggle-icon {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight:bold;
}
}


@media only screen and (min-width: 220) and (max-width: 341px) {
        .section-title{
        padding-right:5%;
        padding-left:5%;
    }
    .accordion section p {font-size:12px; padding-top:inherit; text-align:justify; /*display:none;*/ }

    .accordion-titulo {
    /*position: relative; quitar para poner efecto*/
    text-align:-webkit-center;
    display: block;
    padding: 10px;
    font-size: 17px;
    font-weight: 300;
    background: #0968aa;
    color: #ffffff;
    margin-top:-2%;
    text-decoration: none;
    padding-left:23%;
    padding-right:10%;
}
.accordion-titulo.open {
    background: #f58635;
    color: #fff;
}
.accordion-titulo:hover {
    background: #0968aa;
    font-size:small;
}
 
.accordion-titulo span.toggle-icon:before {
    content:"+";
    color:#ffffff;
}
 
.accordion-titulo.open span.toggle-icon:before {
    content:"-";
}
 
.accordion-titulo span.toggle-icon {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight:bold;
}
}