@charset "UTF-8";

.menuSmart.on { display: none; z-index: 500; left: 0;}
.menuSmart ul { margin-bottom: 0;}
.menuSmart ul li { margin-bottom: .3em;}

.popUp { position: fixed; display: block; height: 100%; left: -100%; background: rgba(255,255,255,.9); text-align: center; z-index: 2000; font-size: 2em; line-height: 1.35em; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease;}
.popUp.on { left: 0%;}
.contPopUp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; overflow: auto; -webkit-overflow-scrolling: touch;}

.btnMenu { display: none; position: absolute; right: 20px; top: -6px; height: 26px; width: 26px; z-index: 1000; overflow: visible; cursor: pointer; -webkit-transition: all .2s ease; transition: all .2s ease;}
.btnMenu .line, .btnMenu .line:before, .btnMenu .line:after { width: 100%; height: 2px; background-color: #007DA4; display: block; position: absolute; content: ''; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease;}
.btnMenu .line { top: 50%; margin-top: -1px;}
.btnMenu .line:before { top: -10px;}
.btnMenu .line:after { top: 10px;}
.btnMenu.on .line { background: transparent;}
.btnMenu.on .line:before { top: 0; -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; -o-transform-origin: center; transform-origin: center; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.btnMenu.on .line:after { top: 0; -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; -o-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}

@media screen and ( min-width: 1440px ) { .colMain { width: 1440px;} }
@media screen and ( min-width: 1680px ) { .colMain { width: 1580px;} }

@media screen and ( max-width: 1280px ) {
	.colMain { width: 100%; padding: 0 30px 0 15px;}
	.boxWorks .itemWork { margin-bottom: 21px; }
}

@media screen and ( max-width: 1100px ) {
	.ui-widget.ui-widget.ui-tooltip { display: none !important;}

	.colMain { width: 100%; padding: 0 5px;}
	.btnMenu { display: block;}

	.header { height: 70px; padding-top: 20px;}
	.header h2 { line-height: 1em;}
	.header #logo { font-size: 25px; line-height: 20px; padding-bottom: 0px; font-weight: 600;}

	.header #logo br { display: none; }

	.boxTopCont { top: 70px; height: 30px; padding-top: 0px; }
	.submenu .boxUp { top: 40px; }
	.content { padding-top: 110px; }
	.slide { top: 110px; }

	.menu { transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease;
		overflow: auto; -webkit-overflow-scrolling: touch;
		position: fixed; width: 100%; height: 100%; z-index: 500; background: #000; background: rgba(0,0,0,.8); padding: 70px 20px 60px 20px; top: 0; left: -100%;}
	.menu.on { left: 0%; }
	.menu ul { text-align: left; font-weight: 200;}
	.menu ul.l { margin-bottom: 62px; }
	.menu ul.l, .menu ul.r { width: 100%; }
	.menu ul li { display: block; margin-bottom: 0; line-height: 31px;}
	.menu ul.l li  { margin-right: 0;}
	.menu ul.r li  { margin-left: 0;}
	.menu a { display: block; font-size: 39px; text-transform: uppercase; line-height: 46px;}

	.header .col3 { width: 100%;}
	.col9.r { float: left;}
	.boxRecent { margin-top: -20px; margin-bottom: 31px; position: relative;}
	.boxRecent:after { content: ''; position: absolute; height: 1px; left: 15px; right: 15px; bottom: -5px; background-color: #333;}
	.boxRecent.padd { padding: 0;}
	.boxRecent.col3 { width: 100%;}
	.boxRecent ul li { float: left; width: 100%; padding: 0 15px; margin-bottom: 5px;}
	.boxRecent h3 { text-transform: uppercase; padding: 0 15px;}
	.boxWorks.col9 { width: 100%;}
	.boxWorks .col3 { width: 33.3333333333%;}

	.boxTxtWork .col6.mlcol3 { margin-left: 0; width: 75%;}
	.col9.mlcol3 { margin-left: 0;}
	.boxContact { padding-bottom: 50px;}
	.boxContact .row { margin-bottom: 21px;}
	.boxTopCont h1 { margin-right: 40px; text-transform: uppercase; font-weight: 600; font-size: 18px; line-height: 21px; color: #AAAAAA;}

	.slide .item { left: 50px; right: 50px;}
	.boxContact.col6 { min-width: 540px;}

	.boxBioImg { width: 75%; padding: 50px 15px;}
}

@media screen and ( max-width: 820px ) {
	.colMain { width: 90%; padding: 0;}
	.col9 { width: 100%;}
	.col6.mlcol3, .boxContact.col6 { margin-left: 0; width: 100%;}
	.boxWorks .col3, .boxWorks .col4 { width: 50%;}
	.boxPress li { padding-left: 35px;}
	.menu { padding-right: 5%; padding-left: 5%;}
	.menu li { padding: 0 15px;}
	.boxTxtWork .col6.mlcol3 { width: 100%;}
	.btnMenu { right: 15px;}
}

@media screen and ( max-width: 770px ) {
	.colMain { width: 97%;}
	.menu { padding-right: 1.5%; padding-left: 1.5%;}
	.submenu .boxUp { width: auto; min-width: 200px;}
	.boxTxt { padding-right: 20px;}
	.btnMenu { right: 10px;}
}

@media screen and ( max-width: 600px ) {
	.colMain { width: 99%;}
	.padd { padding: 0 10px;}
	
	.menu { padding: 60px .5% 30px .5%;}
	.menu ul.l { margin-bottom: 31px;}
	.menu a { font-size: 26px; line-height: 31px;}

	.header { height: 60px; padding-top: 20px;}
	.boxTopCont { top: 60px; height: auto; padding-top: 5px; padding-bottom: 10px;}
	.submenu .boxUp { top: 61px; padding-top: 10px;}
	.content { padding-top: 130px;}
	.boxBottomWork { height: 45px; padding-top: 8px;}
	.slide { top: 130px; bottom: 45px; width: 99%; margin-left: .5%;}
	.slide .item { left: 10px; right: 10px;}

	.boxContact.col6, .boxContact .col6 { min-width: 100%;}
	.boxNewsletter { max-width: 280px; padding-top: 30px;}
	.boxTxt h1, .boxTxt h2, .boxContact .h3Gal { font-weight: 600; font-size: 18px; line-height: 21px; margin-bottom: 12px;}
	.boxContact .boxTxt h1, .boxContact .h3Gal { margin-bottom: 0px; text-transform: uppercase;}

	.boxTopCont h1 { margin-right: 30px; margin-bottom: 0;}
	.boxTopCont .btnsMedia .btn { margin-right: 10px; cursor: pointer; font-size: 16px;}
	.boxTopCont ul li.submenu .btn { font-size: 16px;}
	.boxTopCont ul li.submenu { margin-right: 10px; cursor: pointer;}
	.boxTopCont .btnsMedia .btn:last-child, .boxTopCont ul li.submenu:last-child { margin-right: 0px;}

	.boxRecent  h3, .boxRecent ul li, .menu li { padding: 0 10px; }

	.boxTxtWorkFichaTecnica { padding-left: 30px;}

	.submenu.inputBuscar { padding-bottom: 10px;}
	.submenu-list,
	.submenu.inputBuscar,
	.submenu.inputBuscar input { width: 100%; box-sizing: border-box;}
	.submenu.inputBuscar input { padding: 3px 5px;}

	.boxBioImg { width: 100%; padding: 30px 30px 50px 10px;}
}

@media screen and ( max-width: 440px ) {
	.boxWorks .col3, .boxWorks .col4 { width: 100%;}
	.header #logo { font-size: 20px; line-height: 18px;}  
}
@media screen and ( max-height: 400px ) {
	.header, .boxTopCont { position: absolute;}
	.content { min-height: 460px;}
}

/* Hover */

@media screen and (min-width: 1024px) {
	a:hover, a:hover strong, .boxWorks .itemWork a:hover .date, .submenu .btn:hover, .submenu .boxUp li:hover, .boxPress h2 a:hover strong, .boxPress h2 a:hover .info, .boxContact h2 a:hover, .boxContact h2 a:hover strong, .boxTopCont .btnsMedia .btn:hover { color: #FFFFFF;} 
	.boxTxt a:hover,
	.boxTxtWork a:hover { opacity: .7;}
	input[type="submit"]:hover { padding-right: 55px;}
	a:hover img { box-shadow: 0px 0px 10px #007DA4; -webkit-box-shadow: 0px 0px 10px #007DA4; -moz-box-shadow: 0px 0px 10px #007DA4; }
	.boxPress a.btn.btnLink:hover:before { left: -50px;}
	.boxPress a.btn.btnDownload:hover:before { top: 30px;}
	.boxContact .boxRrss a:hover { border-color: #007DA4;}  
	.boxContact .boxRrss a:hover:before { color: #007DA4;} 
}