@charset "UTF-8";

/*FONTS*/
@font-face {
    font-family: 'sui';
    src: url('../font/suigeneris-webfont.eot');
    src: url('../font/suigeneris-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/suigeneris-webfont.woff2') format('woff2'),
         url('../font/suigeneris-webfont.woff') format('woff'),
         url('../font/suigeneris-webfont.ttf') format('truetype'),
         url('../font/suigeneris-webfont.svg#sui_generisbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*COLORS
Sonosmedia #00CCDD
*/
/*CFG
azulOscuro 005577
azulClaro 00CCDD
/************************************* Color One HEX Code: #00CCDD; ***************************************/

/********************** Home One **************************/
.logo-img a{background: #00CCDD;}
nav .drop-menu li a:hover{color: #00CCDD;}
.single-feature i{color: #00CCDD;}
.single-feature a:hover{background: #00CCDD; border-color: #1495c3;}
.gallery-hover ul li:first-child a{background: #00CCDD;}
.gallery-hover ul li:last-child a:hover{color: #00CCDD;}
.counting h2{color: #00CCDD;}
.testinonialTriangle{background: #00CCDD;}
.service-content i{background: #00CCDD;}
.post-content ul li a, .post-content.pull-right ul li a:hover{background: #00CCDD; border-color: #1495c3;}
.post-content h4 a:hover{color: #00CCDD;}
.contact-address .common-title{color: #00CCDD;}
.custom-button{background: #00CCDD;}
p.copy a:hover{color: #00CCDD;}
.footerlogo{background: #00CCDD;}

/********************* 404 Page ********************************/
.inner-logo a{background: #00CCDD;}
.inner-nav ul li a:hover, .inner-nav ul li.active > a{color: #00CCDD;}
.bread-cumbs ul li a{color: #00CCDD;}
.error-404 h1{color: #00CCDD;}
.subscribeForm button{background: #00CCDD;}

/********************* About us ******************************/
.inner-heading h3 a:hover{color: #00CCDD;}
.features-list li::before{color: #00CCDD;}
.about-us .panel-title a{background: #00CCDD;}
.my-accordion .panel-title a.collapsed:hover{background: #00CCDD;}
.project-counter.about-us .project-count-tringle{background: #00CCDD;}
.about-us .project-count.two h2{color: #00CCDD;}
.single-member h4 a:hover{color: #00CCDD;}
.single-member span{color: #00CCDD;}
.features-list.about-us li::before{color: #00CCDD;}

/******************** Blog Grid ********************************/
.grid-ariticle h4 a:hover{color: #00CCDD;}
.grid-ariticle ul li i{color: #00CCDD;}
.grid-ariticle ul li a:hover{color: #00CCDD;}
.month_like a:hover{color: #00CCDD;}
.month_like a:hover{color: #00CCDD;}
.month_like a:hover i{color: #00CCDD;}
.custom-button.grid_btn:hover{background: #00CCDD;}

/****************** Blog Post ***********************************/
.blog-post-content p.blog-author a{color: #00CCDD;}
.blog-post-content ul.blog-category li i{color: #00CCDD;}
.blog-post-content ul.blog-category li a:hover{color: #00CCDD;}
.blog-post-content ul.blog-category li.post-cat a{color: #00CCDD;}
blockquote{border-color: #00CCDD;}
.author-bio span{color: #00CCDD;}
.comment-meta a{color: #00CCDD;}
.comment-form input[type="text"]:focus, .comment-form textarea:focus{border-color: #00CCDD;}
a.tags:hover{background: #00CCDD;}
.widget-form button{background: #00CCDD;}
.widget-form input:focus{border-color: #00CCDD;}
.widget ul li a::after{color: #00CCDD;}
.widget ul li a:hover{color: #00CCDD;}
.side-post a{color: #00CCDD;}
.side-post a.side-post-title:hover{color: #00CCDD;}
.calendarButton a{background: #00CCDD;}

/********************** blog Sidebar *********************************/
.blog-post-content h2 a:hover{color: #00CCDD;}
.blog-post-content ul.blog-category li.categorys a{color: #00CCDD;}
.default-pagination li a:hover, .default-pagination li a.active{background: #00CCDD;}
.default-pagination.blog-pagi li a:hover{background: #00CCDD;}

/********************** Contact page *********************************/
.redTriangle{background: #00CCDD;}
.inputP input:focus{border-color: #00CCDD;}
.contactFormHolder textarea:focus{border-color: #00CCDD;}
.sb_button{background: #00CCDD;}

/********************** Events page *********************************/
.eventDet h4 a:hover{color: #00CCDD;}
.evMeta p i{color: #00CCDD;}

/*********************** Folio *****************************************/
.mixi-button li.active, .mixi-button li:hover{background: #00CCDD;}
.mixi-button.flio2 li:hover{background: #00CCDD;}
.default-pagination.folio2 li a:hover{background: #00CCDD;}
.category a{color: #00CCDD;}
.folio4-post-content a{color: #00CCDD;}


/*********************** Home 3 *****************************************/
.custom-button.home3{background: #00CCDD;}
.project-count-tringle{background: #00CCDD;}
.project-count.two h2{color: #00CCDD;}
.my-accordion .panel-title a{background: #00CCDD;}
.features-list li::before{color: #00CCDD;}
.features-list.home3 li::before{color: #00CCDD;}
.mixi-button.green li.active, .mixi-button.green li:hover{background: #00CCDD;}
.gallery-hover.home3 ul li:first-child a{background: #00CCDD;}
.gallery-hover.home3 ul li:last-child a:hover{color: #00CCDD;}
.default-pagination.green li a:hover, .default-pagination.green li a.active{background: #00CCDD;}
.contact-address.home3 .common-title{color: #00CCDD;}
.blog-content.home3 .custom-button{background: #00CCDD;}

/*************************** member Page *********************************/
.member-meta li i{color: #00CCDD;}
.skill-rect2{background: #00CCDD;}
.chart4 h4{color: #00CCDD;}
.eventMeta p i{color: #00CCDD;}
.eventMeta p a{color: #00CCDD;}

/*************************** New **************************************/
.slider-caption h2::before{background: #00CCDD;}
.switch::before{background: #00CCDD;}

#backToTop::before{border-bottom-color: #00CCDD;}
.inner-nav ul li a:hover, .inner-nav ul li:hover > a{color: #00CCDD;}
.inner-nav ul li ul.drop-menu li a:hover{color: #00CCDD;}
nav .drop-menu li a:hover{color: #00CCDD;}
.menu ul li.active > a{
    font-weight: 700;
}
.inner-nav ul li.active > a {
  color: #00CCDD;
  font-weight: 700;
}

/************************ Loader *****************************/
.loaderWraper{background: #00CCDD;}
.loading .finger-item i{background: #00CCDD;}
.loading .last-finger-item i::after{background: #00CCDD;}
.loading .finger-item span::before, .loading .finger-item span::after{background: #00CCDD;}

#backToTop::before{background: #00CCDD;}

/*SLIDER*/
.itemOne{
    background: url(../img/slider/2.jpg) no-repeat center center / cover rgba(0, 0, 0, 0);
    z-index:20;
}
.itemTwo{
    background: url(../img/slider/6.jpg) no-repeat center center / cover rgba(0, 0, 0, 0);
}
.itemThree{
    background: url(../img/slider/euskal.jpg) no-repeat center center / cover rgba(0, 0, 0, 0);
}
.itemFour{
    background: url(../img/slider/3.jpg) no-repeat center center / cover rgba(0, 0, 0, 0);
}

/*CUSTOM*/
.heading h1 a {
	font-family:'sui';
	color:#005577;
}

.heading h1 a span {
	color:#00CCDD;
}

.headerTriangle{

}

.inerPageheader{
    background: none repeat scroll 0 0 #00CCDD;
}

.inner-logo a {
    padding: 5px;
    width: 80px;
}

.inner-heading h3 a {
	font-family:'sui';
	color:#005577;
}

.inner-heading h3 span {
	color:#00CCDD;
	-webkit-transition: all 700ms ease-in-out;
    -moz-transition: all 700ms ease-in-out;
    -ms-transition: all 700ms ease-in-out;
    -o-transition: all 700ms ease-in-out;
    transition: all 700ms ease-in-out;
}

.inner-heading h3:hover a span {
	color:#005577;
}

.inner-nav ul li a {
	margin:15px 0 15px;
	font-weight:400;
	padding:10px 15px;
}

.inner-nav ul li a:hover, .inner-nav ul li a:focus, .inner-nav ul li.active a {
	color:#005577;
	background-color: #FFF;
	padding:10px 15px;
}

.switch {
	width: 100px;
    height: 90px;
    position: absolute;
    left: -100px;
    top: 0px;
    color: #fff;
    font-size: 20px;
    padding-top: 10px;
    padding-right: 10px;
    text-align: right;
    overflow: hidden;
}

.switch:before{
    background: #005577 !important;
    content: "";
    height: 100%;
    left: 0;
    outline: 10px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    top: -70px;
    transform: skew(0deg, 45deg);
    -moz-transform: skew(0deg, 45deg);
    -webkit-transform: skew(0deg, 45deg);
    -ms-transform: skew(0deg, 45deg);
    -o-transform: skew(0deg, 45deg);
    width: 100%;
}

.presetArea {
	background-color: #005577;
}

.presetArea h2 {
	color:#FFF;
}

.presetArea h2 span{
	color:#00CCDD;
	font-weight:400;
}

.presetArea h3 {
	color:#FFF;
}

.presetArea h3 span{
	color:#00CCDD;
	font-weight:400;
}

.presetArea .idioma{
    width: 100%;
    position: relative;
    margin:30px 0 20px 0;
}

.presetArea ul {
}

.presetArea ul li {
	display:inline-block;
	text-align:center;
}

.presetArea ul li a {
	color:#FFF;
	display:inline-block;
	background-color: #005577;
	padding:6px;
	width:50px;
	margin-right:5px;
}

.presetArea ul li a:focus, .presetArea ul li a:hover, .presetArea ul li.active a {
	background-color: #00CCDD;
} 

.presetArea .login{
    width: 100%;
    position: relative;
    margin:30px 0 20px 0;
}

.presetArea .login form{
	padding:15px;
    background-color:#00CCDD;
}

.presetArea .login form a{
    color:#FFF;
}

.presetArea .login form button {
    background-color:#005577;
    border:1px solid #00CCDD;
    color:#FFF;
}

@media screen and (min-width:1824px) and (max-width:2565px){
    .presetArea:before{
        background: none repeat scroll 0 0 #005577;
        content: "";
        height: 900px;
        left: 365px;
        outline: 10px solid rgba(0, 0, 0, 0.1);
        position: absolute;
        top: 0;
        transform: skew(45deg, 0deg);
        width: 380px;
    }    
    .presetArea h2 {
        color: #FFF;
        font-size: 32px;
        line-height: 0.8;
        position: relative;
        text-align: center;
    }
    .presetArea {
    	background-image:url('../img/fondo_web.png');
    }
    .presetArea .idioma {
        margin-top: 225px;
    }
}


@media screen and (min-width: 640px) and (max-width: 767px){
     .presetArea{
        display: block;
    }
}

@media screen and (min-width: 320px) and (max-width: 639px){
	.presetArea .idioma {
        display:none;
    }
    .presetArea .login {
        margin:20px 0 0 0;
    }
    .presetArea .login h3 {
    	display:none;
    }
     .presetArea{
        display: block;
    }
}

.menu ul li a {
	width:auto;
	font-weight:700;
}

.menu ul li.active a {
	background-color:#00CCDD;
	color:#FFF;
}
.menu ul li:hover > a {
	background-color:#005577;
	color:#FFF;
}

@media screen and (min-width:1824px) and (max-width:2565px){
	.header-area{ 
		padding-left:40px;
	}
	.logo-img {
	    margin-top: 50px;
	    width: 300px;
	    height: 300px;
	    margin-bottom:80px;
	}
	.heading h1 {
		font-size: 72px;
        line-height: 0.8;
        margin-top: 27px;
	}
	.heading h1 span{
		padding-left:20px;
	}
	.heading p {
		font-size:26px;
		margin:50px 0 50px;
		text-align:center;
	}
	.menu {
		margin-top:80px;
	}
	.menu ul li a {
		font-size:32px;
		padding:15px 25px;
	}
	
}

@media screen and (min-width:1550px) and (max-width:1823px){
	.header-area{ 
		padding-left:30px;
	}
	.logo-img {
	    margin-top: 25px;
	    width: 200px;
	    height: 200px;
	}
	.heading h1 {
		font-size: 52px;
        line-height: 46px;
	}
	.heading h1 span{
		padding-left:20px;
	}
	.heading p {
		font-size:20px;
		margin:30px 0 30px;
		text-align:left;
	}
	.menu {
		margin-top:40px;
	}
	.menu ul li a {
		font-size:22px;
		padding:15px 20px;
	}
}

@media screen and (min-width: 1200px) and (max-width: 1549px){
	.header-area{ 
		padding-left:20px;
	}
	.logo-img {
	    margin-top: 25px;
	    width: 200px;
	    height: 200px;
	    margin-bottom:50px;
	}
	.heading h1 {
		font-size: 48px;
        line-height: 46px;
	}
	.heading h1 span{
		padding-left:20px;
	}
	.heading p {
		font-size:18px;
		margin:30px 0 30px;
		text-align:left;
	}
	.menu {
		margin-top:40px;
	}
	.menu ul li a {
		font-size:20px;
		padding:15px 20px;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px){
	.header-area{ 
		padding-left:25px;
	}
	.logo-img {
	    margin-top: 20px;
	    width: 200px;
	    height: 200px;
	    margin-bottom:60px;
	}
	.heading h1 {
		font-size: 46px;
        line-height: 42px;
	}
	.heading h1 span{
		padding-left:20px;
	}
	.heading p {
		font-size:18px;
		margin:35px 0 35px;
		text-align:left;
	}
	.menu {
		margin-top:40px;
	}
	.menu ul li a {
		font-size:20px;
		padding:15px 20px;
	}
}

@media screen and (min-width: 768px) and (max-width: 991px){
	.header-area{ 
		padding-left:0;
	}
	.logo-img {
	    margin-top: 20px;
	    width: 160px;
	    height: 160px;
	    margin-bottom:20px;
	}
	.heading h1 {
		font-size: 42px;
        line-height: 38px;
	}
	.heading h1 span{
		padding-left:15px;
	}
	.heading p {
		font-size:16px;
		margin:10px 0;
		text-align:left;
	}
	.menu {
		margin-top:0px;
	}
	.menu ul li a {
		font-size:20px;
		padding:15px 20px;
	}
}

@media screen and (min-width: 640px) and (max-width: 767px){
	.header-area{ 
		padding-left:0;
	}
	.logo-img {
	    margin-top: 20px;
	    width: 160px;
	    height: 160px;
	    margin-bottom:20px;
	}
	.heading h1 {
		font-size: 42px;
        line-height: 35px;
	}
	.heading h1 span{
		padding-left:15px;
	}
	.heading p {
		font-size:16px;
		margin:10px 0;
		text-align:left;
	}
	.menu {
		margin-top:0px;
	}
	.menu ul li a {
		font-size:20px;
		padding:15px 20px;
	}
}

@media screen and (min-width: 481px) and (max-width: 639px){	
    .header-area{ 
		padding-left:0;
	}
	.logo-img {
	    margin-top: 20px;
	    width: 175px;
	    height: 175px;
	    margin-bottom:10px;
	}
	.heading h1 {
        font-size: 40px;
        line-height: 36px;
        margin-top: 5px;
    }
	.heading h1 span{
		padding-left:15px;
	}
	.heading p {
		font-size:16px;
		margin:10px 0;
		text-align:left;
	}
	.menu {
		margin-top:0px;
	}
	.menu ul li a {
		font-size:20px;
		padding:15px 20px;
	}
}

@media screen and (min-width: 320px) and (max-width: 480px){	
    .header-area{ 
		padding-left:0;
	}
	.logo-img {
	    margin-top: 20px;
	    width: 160px;
	    height: 160px;
	    margin-bottom:10px;
	}
	.heading h1 {
        font-size: 36px;
        line-height: 36px;
        margin-top: 24px;
    }
	.heading h1 span{
		padding-left:15px;
	}
	.heading p {
		font-size:16px;
		margin:10px 0;
		text-align:left;
	}
	.menu {
		margin-top:0px;
	}
	.menu ul li a {
		font-size:20px;
		padding:15px 20px;
	}
}

.slider-caption h2 {
	font-weight:700;
	text-transform: none;
	padding-right:80px;
}

.slider-caption h3 {
	padding-right:80px;
}

.slider-caption h3 span {
	font-weight:700;
	text-transform: none;
}

.slider-caption h3:before{
    background: #005577;
}

 
.features-area {
  padding-bottom:120px;
  padding-top:120px;
  background-image:url('../img/fondo_web.png');
  background-color:#00CCDD;
}

.features-area.alternative {
  background-color:#FFF;
}

.features-area.home2 p {
	color:#FFF;
	font-size:16px;
}

.features-area.home2 img {
	padding-bottom:20px;
}

.features-area.home2 ul li {
	color:#005577;
	font-weight:bold;
	margin:0;
}

.features-area.home2 h3 {
  margin-top:0px;
  padding-bottom:16px;
  text-transform:uppercase;
  color:#FFF;
}

.features-area.home2 h3 span {
  color:#005577;
  font-weight:normal;
  font-size:35px;
}

.features-list li:before{
    content: "\ebeb";
    font-family: "fontello";
    font-size: 15px;
    padding-left:5px;
    padding-right: 14px;
    color: #FFF;
    display: block;
    float:left;
}

@media screen and (min-width: 320px) and (max-width: 480px){	
	.features-area.home2 h3 span {	  
	  font-size:26px;
	}
}

.gallery-area {

}

.gallery-area .gallery-hover h4 {
	color:#00CCDD;
	font-size:24px;
}

.gallery-area .gallery-hover h4 span {
	color:#005577;
	font-weight:400;
	font-size:18px;
}



.single-feature {
	min-height:325px;
	background-color:#FFF;
}

.single-feature h4 {
	color:#005577;
}

.single-feature h4 span {
	font-weight:400;
	color:#00CCDD;
}

.single-feature p {
	color:#444;
	font-size:16px;
}

.map-area {
	background-color: #005577;
	padding:70px 0;
}

.homMapTriangle {  
  background:#005577;
}

.homeMap:after{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(000, 000, 000, .5);
}

.homeMap {
	text-align:right;
}

.homeMap img{
	display:inline-block;
    height:100%;
    width:auto;
}

.contact-address.home2 .common-title {
  color:#FFF;
  font-size:46px;
}

.contact-address.home2 .common-title span {
  font-weight:400;
  font-size:41px;
  color:#00CCDD;
}

.contact-address p, .contact-address p a {
	color:#FFF;
}

.contact-address p a:hover {
	color:#00CCDD;
}

.contact-address p i {
	color:#00CCDD;
}

@media screen and (min-width: 481px) and (max-width: 768px){	
	.homeMap img{
		display:inline-block;
		width:100%;
		height:auto;
	}
}

@media screen and (min-width: 320px) and (max-width: 480px){	
	.map-area {
		padding:30px 0;
	}
	.homeMap img{
		display:inline-block;
	    height:auto;
	    width:auto;
	}
	.contact-address p, .contact-address p a {
		font-size:16px;
	}
}

.footer-section {
	padding:15px 0 20px 0;
	background-color:#00CCDD;
	background-image:url('../img/fondo_web.png');
}

.footer-section ul {
	padding:0;
	margin:10px 0;
}

.footer-section ul li  {
	display:inline-block;
}

.footer-section ul li a {
	color:#EEE;
	padding:15px;
	font-family: 'Open Sans', sans-serif;
}

.footer-section ul li a:hover {
	text-decoration:underline;
}

.footertriangle {
	background-color:#005577;
	background-image:url('../img/fondo_web.png');
}

p.copy, p.copy a {
	color:#FFF;
	padding:0;
	line-height: auto;
	font-size:14px;
	text-transform: none;
	font-family: 'Open Sans', sans-serif;
	font-weight:normal;
}

h4.footerName{
	font-family:'Sui';
    color: #FFF;
    display: inline-block;
    padding: 0;
    text-transform: uppercase;
    width: 100%;
    font-size:16px;
}
h4.footerName span{
    color: #FFF;
}

#clientes {
	padding:60px 0;
	text-align:center;
	background-color: #FFF;
}

h2.centered {
	text-align:center;
	font-size:24px;
	margin-bottom:20px;
	text-transform: uppercase;
	color:#005577;
	margin:20px 0;
}

.magicwall{
	background-color: #FFF;
	height:360px;
	max-width: 1160px;
	width: 100%;
	margin: 0 auto 30px;
	background-image:url('../img/fondo_web.png');
}

.magicwall .magicwall-grid {
	background: #00CCDD;
	background-image:url('../img/fondo_web.png');
}

.magicwall li .hover-content{
    position: absolute;
    z-index: 1;
    opacity: 0;
    font: normal normal 16px/20px "Open Sans", Arial, sans-serif;
    text-align: center;
    color: #fff;
    background: rgba(0, 162, 162, 0.75);
    -webkit-transition: opacity 150ms ease-out;
    -moz-transition: opacity 150ms ease-out;
    transition: opacity 150ms ease-out;
    width:100%;
    height:100%;
}
 
.magicwall li .hover-content p{
    color: #FFF;
    padding:20px;
    font-weight:bold;
}
 
.magicwall li .hover-content a{
    text-decoration: none;
}
 
.magicwall li .hover-content a:hover{
    text-decoration: underline;
}
 
.magicwall li .hover-content button{
    margin: 10px 0;
    padding: 0.65em 1em;
    line-height: 1;
    outline: none;
    text-transform: uppercase;
    cursor: pointer;
    color: #fff;
    border: none;
    background: #ef4135;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: background 150ms ease-out;
    -moz-transition: background 150ms ease-out;
    transition: background 150ms ease-out;
}
 
.magicwall li .hover-content button:hover{
    background: #FF6600;
}
 
.magicwall li:hover .hover-content{
    opacity: 1;
}