@charset "UTF-8"; 

.btn-menu { display: none; position: absolute; padding: 1rem; top: 1.2rem; right: 0; z-index: 1000; overflow: visible; cursor: pointer;}
.btn-menu-box { position: relative; height: 2rem; width: 2.6rem;}
.btn-menu .line, .btn-menu .line:before, .btn-menu .line:after { width: 100%; height: 2px; background-color: #000; display: block; position: absolute; content: '';}
.bg-black .btn-menu .line, .bg-black .btn-menu .line:before, .bg-black .btn-menu .line:after { background-color: #FFF;}
.btn-menu .line { left: 0; top: .9rem;}
.btn-menu .line:before { top: -.9rem;}
.btn-menu .line:after { top: .9rem;}
.btn-menu.active .line { background: transparent;}
.btn-menu.active .line:before, .btn-menu.active .line:after { top: 0; background-color: #FFF; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center;} 
.btn-menu.active .line:before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.btn-menu.active .line:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}

@media ( min-width: 1920px ) {
	.col-main, .carousel-section .carousel-info-main, .carousel-section .carousel-info-more, .carousel-home .middle .rowMiddle, .carousel-box-p.carousel-box .carousel-item, .carousel-projects .carousel-info-main { width: 80%;}
	.carousel-home .carousel-pag, .carousel-section .carousel-pag, .btn-menu, .carousel-projects .carousel-pag { right: 10%;}
	.carousel-box-p .flickity-prev-next-button.previous { left: 10%;}
	.carousel-box-p .flickity-prev-next-button.next { right: 10%;}
}

@media ( min-width: 2100px ) {
	.col-main, .carousel-section .carousel-info-main, .carousel-section .carousel-info-more, .carousel-home .middle .rowMiddle, .carousel-box-p.carousel-box .carousel-item, .carousel-projects .carousel-info-main { width: 75%;}
	.carousel-home .carousel-pag, .carousel-section .carousel-pag, .btn-menu, .carousel-projects .carousel-pag { right: 12.5%;}
	.carousel-box-p .flickity-prev-next-button.previous { left: 12.5%;}
	.carousel-box-p .flickity-prev-next-button.next { right: 12.5%;}
}

@media ( max-width: 1280px ) {
	html { font-size: 9px;}
	.col-main, .carousel-section .carousel-info-main, .carousel-section .carousel-info-more, .carousel-home .middle .rowMiddle, .carousel-box-p.carousel-box .carousel-item, .carousel-projects .carousel-info-main { width: 94%;}
	.carousel-home .carousel-pag, .carousel-section .carousel-pag, .btn-menu, .carousel-projects .carousel-pag { right: 3%;}
	.carousel-box-p .flickity-prev-next-button.previous { left: 3%;}
	.carousel-box-p .flickity-prev-next-button.next { right: 3%;}

	.col11-l { width: 91.333%;}

	.txt-xl { font-size: 3.6rem;}
	.box-info-item { padding-top: .5rem;}

	.carousel-section .carousel-info-main { padding-right: 1rem;}
	.carousel-section .carousel-info-header { min-width: 100%; padding-right: 0;}
	.carousel .flickity-prev-next-button { margin-top: -3rem; width: 5rem; height: 5rem; background-size: 100% 100%;}
	.carousel-projects .carousel-info .btn-more-info img, .btn-top img { width: 6rem; }
}

@media ( max-width: 1030px ) {
	#logo { font-family: 'DIN Next W01 Medium', sans-serif;}
	.btn-menu { display: block;}
	.header { position: absolute; width: 100%; background-color: rgba(255,255,255,.9);}
	.header.bg-black { background-color: rgba(0,0,0,0);}
	.menu.active { top: 0;}
	.menu { position: fixed; z-index: 2; top: -100%; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.6); padding: 7rem 3% 3rem 3%; overflow: auto; -webkit-overflow-scrolling: touch;}
	.header .menu ul, .header .menu ul li, .header .menu a { display: block; margin: 0; padding: 0; border: 0;}
	.header .menu ul { padding: .5rem 0 1.5rem 0;}
	.header .menu a, .header .menu ul a, .header .menu a.btn-lang, .header .menu .language-chooser { font-size: 2.4rem; line-height: 1.5em; padding: 0 1rem; text-transform: none; color: #FFF; border: 0;}
	.header .menu a.active, .header .menu a:hover, .header .menu ul a.active, .header ul .menu a:hover  { border: 0; opacity: .5; }
	.header .menu .language-chooser a { padding: 0;}

	.header .menu .btn-hover .menu-hover-content li { margin-bottom: 1rem; }
	.header .menu ul ul a { line-height: 3rem; padding: 0 1rem;}

	.header .menu ul.menu-hover-content { position: relative; visibility: visible; display: none; padding: 1rem 0;}
	.header .menu ul.menu-hover-content li { white-space: normal; padding: .2rem 0;}
	.header .menu .active ul.menu-hover-content { display: block;}

	.has-submenu:after { content: ''; display: inline-block; width: .6rem; height: .6rem; border-bottom: 2px solid #FFF; border-right: 2px solid #FFF; margin-left: .5rem; margin-top: -.3rem; vertical-align: middle; transform: rotate(45deg);}
	.active > .has-submenu:after { transform: rotate(225deg); }

	.col6-m { width: 50%;}
	.col9-m { width: 75%;}
	.col12-m { width: 100%;}

	.center-m { position: relative; margin: auto; float: none;}

	.box-rrss br { display: none;}

	.content-main .content-info .box-info-item .content-info-header { margin-bottom: 0;}
	.content-main .box-sub { display: block; overflow: hidden; height: 5rem; margin-bottom: 3rem;}
	.content-main .box-sub:after { content: ''; position: absolute; width: 20%; height: 100%; top: 0; right: 0;
	background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)); 
	background-image: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1));  
	background-image: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)); 
	background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));}
	.content-main .box-submenu { padding-bottom: 4rem; padding-right: 20%; white-space: nowrap; overflow: auto; -webkit-overflow-scrolling: touch; width: 100%; margin: 0;}
	.content-main .box-submenu li { display: inline-block;}
	.content-main .box-submenu a { padding: 0 2rem 0 0;}

	body { font-size: 2rem;}
	.txt-xl { font-size: 2.6rem;}
	.txt-l { font-size: 2rem;}
	.txt-m, .txt-m *, .txt-run, 
	.txt-run * { font-size: 1.6rem;}
	.txt-s { font-size: 1.6rem;}


	.carousel .carousel-pag { right: 50%; padding: 0; transform: translateX(50%);}
	.carousel-box-p .carousel-pag { right: 0; padding: 0; transform: translateX(0);}

	.carousel-home .middle { padding-bottom: 6rem; }
	.carousel-home .carousel-box .carousel-info { max-width: 100%;}

	.carousel-projects .carousel-info-main { padding-right: 0;}
	.carousel-projects .carousel-info-box { padding-bottom: 8rem;}
	.carousel-projects .carousel-info .carousel-info-header { width: 100%; max-width: 100%; padding: 0;}

	.content-full .btn-down,
	.btn-up { display: block;}

}

@media ( max-width: 700px ) {
	.col12-s { width: 100%;}

	.btn-menu { top: .8rem;}

	.header #logo, .header .menu a { padding-top: 1rem; padding-bottom: 1rem;}
	.box-all-info { width: 100%;}
	.box-all-info-main { padding: 6rem 3rem 3rem 2rem;}
	.content-main { padding: 6rem 0;}
	.content-main .content-info, .content-section .content-info,
	.carousel-main .carousel-info, .carousel-section .carousel-info  { padding: 2rem 0;}
	.carousel .carousel-pag { bottom: 2rem;}

	.box-all-info-main .txt-m, .box-all-info-main a { line-height: 3.8rem;}
	.content-main .box-img-studio { margin: 4rem 0 0 0;}

	.carousel-projects .carousel-info .btn-more-info img, .btn-top img { width: 4.5rem; }
	.carousel .flickity-prev-next-button {height: 4.5rem;}

	.padd-g { padding: 3rem 0;}
}

@media ( max-width: 900px ) and ( orientation: portrait ) {
	.carousel-box { /* max-height: calc(100vw); */}
	.carousel-home .carousel-box, .carousel-section .carousel-box { max-height: 100vh;}

}