/*SUPPORT*/
.centered {width: calc(100% - 60px);}

/*RESPONSIVE*/
.desktop-only {display: inherit;}
.mobile-only {display: none;}
body:after {z-index: 1; content: ''; display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; pointer-events: none; opacity: 0.07;}

/*SECTION CONTENT*/
.section-content {padding-bottom: 300px;}
.section-content.alter {padding-bottom: 100px;}

/*FRANJAS*/
.franja {padding: 50px 0 90px 0;}

/*TEXTS*/
.title {font-size: 3.5em;}
.subtitle {font-size: 1.5em;}

/*HEADER*/
.header .btn-menu {width: 125px; height: 24px;}
.header .btn-menu label {margin: 0 40px 0 0; display: block; position: absolute; top: -5px; right: 20px; font-size: 0.95em; color: #fff;}
.header .btn-menu img {right: 20px;}
.header .menu-drawer ul {margin: 0;}
.header .menu-drawer ul li {display: inline-block; margin: 0 50px;}
.header .menu-drawer ul li a {color: #fff; opacity: 0.5; font-size: 1.6em;}
.header .menu-drawer ul li a:hover {color: #fff; opacity: 1;}
.header .btn-close {width: 30px; height: 30px; top: 20px; right: 17px;}
@media(max-width: 65em){
    .header .menu-drawer ul li {margin: 0 10px;}
    .header .menu-drawer ul li a {font-size: 1.3em}
}
@media(min-width: 65em) and (max-width: 70em){
    .header .menu-drawer ul li {margin: 0 20px;}
}

/*FOOTER*/
.footer {height: 300px}
.footer .slogan h3 {display: inline-block; margin: 0 5px; font-size: 3em;}
.footer .links {margin: 0 0 40px 0; float: left; text-align: left;}
.footer .links *{display: block;}
.footer .links .download label span {margin-left: 25px;}
.footer .developer {margin: 40px 0 0 0; float: right; text-align: right;}
.footer.contact-us {height: 100px; background: #dedcdd;}
.footer.contact-us h3 {font-size: 1.8em; font-family: 'Raleway Semibold';}
/*------------------------------------------------------------------------*/

/*CONTACT-DRAWER*/
.box {height: 1911px;}
.hid-box.active .btn-close {right: 30px;}
.hid-box.active .contact-phrase {margin-bottom: 40px;}
.hid-box.active .contact-phrase label:first-child {font-size: 2em;}
.hid-box.active .mid-line {width: 100%; height: 1px; margin-bottom: 50px; background-color: #bebebe !important;}
.hid-box.active .contact-links {margin-bottom: 40px;}
.hid-box.active .contact-links * {font-size: 1em !important;}
.hid-box.active .contact-links a {display:inline; }
.hid-box.active .contact-links label {display: inline; color: #333}

/*HOME*/
.home .hero .slider {height: 660px;}
.home .hero .slider .slider-pages {top: 110px;}
.home .hero .catchphrase {width: 50%;}
.home .hero .catchphrase label {padding: 15px 40px; font-size: 3em;}
.home .hero .catchphrase label:nth-child(1) {margin-right: 75px;}
.home .hero .catchphrase label:nth-child(2) {margin-left: 75px; margin-top: -130px;}
.home .hero .down-button {width: 50px; height: 50px; margin-top: 290px;}
@media(max-width: 80em){
    .home .hero .catchphrase {width: 75%;}
    .home .hero .catchphrase label:nth-child(2) {margin-top: -10px;}
}
@media(min-width: 80em){
    .home .hero .slider {height: 780px;}
    .home .hero .catchphrase {width: 45%;}
    .home .hero .catchphrase label:nth-child(1) {margin-right: 85px;}
    .home .hero .catchphrase label:nth-child(2) {margin-left: 85px; margin-top: -10px;}
}

.home .franja.projects {padding: 50px 0 10px 0;}
.home .projects .project-intro-title {margin: 0 0 20px 80px; text-align: left;}
.home .projects .project-scroll-hide {height: 320px; width: 100%; overflow: hidden;}
.home .projects .project-slider-container {width: 100%; padding-bottom: 17px; overflow-x: scroll; overflow-y: hidden;}
.home .projects .project-block-container {width: 1710px;}
.home .projects .project-block {width: 560px; height: 320px; float: left;}
.home .projects .project-block:not(:first-child) {margin-left: 15px;}
.home .projects .project-block .project-description {height: 100%; bottom: initial; opacity: 0;}
.home .projects .project-block .project-description:hover {opacity: 1;}
.home .projects .project-block .project-description .description-container {margin-top: 260px;}
.home .projects .projects-more {margin: 20px 120px 10px 0; text-align: right;}
@media(min-width: 80em){
    .home .projects .project-block-container {width: 1980px;}
    .home .projects .project-scroll-hide {height: 420px}
    .home .projects .project-block {width: 650px; height: 420px;}
    .home .projects .project-block .project-description .description-container {margin-top: 355px;}
}

.home .franja.about-us {padding: 0;}
.home .about-us {background: transparent url('../img/BG.jpg') center no-repeat; background-size: cover;}
.home .about-us .about-us-title {text-align: left;}
.home .about-us .about-us-title label {margin: 0 0 0 -60px;}
.home .about-us .arq img {width: 400px; display: block;}
.home .about-us .phrase {margin: 105px 50px 0 0; padding: initial;}
.home .about-us .phrase .paragraph {font-size: 1.2em;}
.home .about-us .phrase label:not(:first-child){display: inline; font-size: 1.2em; font-family: 'Raleway Semibold';}
.home .about-us .about-us-more-desktop {text-align: right; margin: 180px 50px 0 0;}
@media(max-width: 70em){
    .home .about-us .about-us-title label {margin: 0 0 0 0;}
    .home .about-us .about-us-more {margin: 50px 0 0 0;}
}
@media(min-width: 70em) and (max-width: 75em){
    .home .about-us .about-us-more {margin: 50px -50px 0 0;}
}

.home .franja.our-services {padding: 20px 0 30px 0;}
.home .our-services .service-container {margin-right: 180px;}
.home .our-services .services-title {margin-top: 70px; margin-left: -160px;}
.home .our-services .services-more {margin: 20px -100px 0 0; text-align: right;}
@media(max-width: 60em){
    .home .our-services .service-container {margin-right: 0;}
    .home .our-services .services-title {margin-left: -25px;}
    .home .our-services .services-more {margin: 20px 0 0 0;}
}
@media(min-width: 60em) and (max-width: 70em){
    .home .our-services .service-container {margin-right: 100px;}
    .home .our-services .services-title {margin-left: -40px;}
    .home .our-services .services-more {margin: 20px 0 0 0}
}
@media(min-width: 70em) and (max-width: 75em){
    .home .our-services .services-more {margin: 20px -50px 0 0}
}

/*ARCHITECTS*/
.architects .team .team-description {margin: 15px 0 15px 0;}
.architects .team .cover::before {content: ''; width: 100%; height: 1px; position: absolute; top: 0; display: block; background: #bebebe;}
.architects .team .cover {height: 600px; position: relative;}
.architects .team .cover::after {content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; display: block; background: #bebebe;}

.architects .single {overflow: hidden;}
.architects .single .architect-block  {position: relative;}
.architects .single .architect-block .content {width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.architects .single .architect-block .content .container {position: relative;}
.architects .single .architect-block .content .container::before {content: ''; display: block; width: 500%; height: 1px; position: absolute; bottom: 0; left: -100%; background: rgba(190, 190, 190, 0.4);}
.architects .single .architect-block img {width: 400px; display: block; float: left;}
.architects .single .architect-block .phrase {width: calc(100% - 400px); margin: 170px 0 0 0; display: block; float: right;}
.architects .single .architect-block:nth-child(odd) img {float: right;}
.architects .single .architect-block:nth-child(odd) .phrase {float: left;}
.architects .single .architect-block .phrase .paragraph {margin-bottom: 10px; font-size: 0.9em}
.architects .single .architect-block .phrase label {font-size: 0.8em}
.architects .single .architect-block .phrase label:nth-child(2) {font-size: 1em; font-family: 'Raleway Semibold';}
.architects .single .architect-block .phrase label:nth-child(3) {font-family: 'Raleway Semibold';}
@media (max-width:58em){
    .architects .single .architect-block .phrase {width: calc(100% - 260px); margin: 110px 10px 0 0;}
    .architects .single .architect-block img {width: 250px;}
}

.diagram-line-a {width: 100%; height: 100%; position: fixed; top: 0; left: 0;}
.vert-line-a {width: 1px; height: 100%; position: absolute; top: 0; left: 90%; background: rgba(190, 190, 190, 0.4);}



/*SERVICES*/
.services .logo {background: transparent; margin: 0 auto;}
.services .logo img {background: transparent;}
.services .services-intro {height: 700px; margin-bottom: 70px;}
.services .services-intro .content {margin-top: 150px;}
.services .services-intro .content h2 {font-size: 2em}
.services .services-intro .content label {font-size: 1.1em}
.services .services-intro .down-button {width: 50px; height: 50px; bottom: -270px}
.services .services-intro .down-button img {width: 100%;}
@media (max-height: 39em){
    .services .services-intro .down-button {bottom: -180px}
}
@media (max-height: 36em){
    .services .services-intro .down-button {bottom: -120px}
}

.services .all-services {overflow: hidden;}
.services .service-block {position: relative;}
.services .service-block .content {width: 100%; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);}
.services .service-block:not(:last-child) {margin-bottom: 80px;}
.services .service-block h3 {height: 18px; margin: 0; display: inline-block; transform: translateX(calc(-50% - 170px)); line-height: 18px; vertical-align: bottom;}
.services .service-block .column-container {position: relative;}
.services .service-block .column-container::before {content: ''; display: block; width: 500%; height: 1px; position: absolute; top: 0; left: -100%; background: rgba(190, 190, 190, 0.4);}
.services .service-block .column-container::after {content: ''; display: block; width: 500%; height: 1px; position: absolute; bottom: 0; left: -100%; background: rgba(190, 190, 190, 0.4);}
.services .service-block .content-left {text-align: right;}
.services .service-block .content-right {text-align: left;}
.services .service-block img {width: 140px; margin:0 30px 0 0; display: block; float: right;}
.services .service-block li {margin-left: 20px;}
.services .service-block li::before {width: 9px; height: 4px;}

.diagram-line-s {width: 100%; height: 100%; position: fixed; top: 0; left: 0;}
.vert-line-s {width: 1px; height: 100%; position: absolute; top: 0; background: rgba(190, 190, 190, 0.2);}
.vert-line-s:first-child {left: 50%;}
.vert-line-s:nth-child(2) {left: calc(50% - 30px);}
.vert-line-s:nth-child(3) {left: calc(50% - 170px);}

/*PROJECTS*/
.projects .project-showcase .project-showcase-mobile .project-block {width: calc(50% - 20px); margin: 10px; float: left;}

@media (min-width: 65em)
{
    .projects .project-filter {margin: 100px 0 40px 0;}
    .projects .project-filter ul li{margin: 0 30px; display: inline-block;}

    .projects .project-showcase .project-showcase-mobile {display: none;}
    .projects .project-showcase .project-showcase-desktop {max-width: 1035px; margin: 0 auto 200px auto; display: block; position: relative;}
    .projects .project-showcase .project-showcase-desktop::before {content: ''; display: block; width: 500%; height: 1px; position: absolute; top: 42px; left: -100%; background: rgba(190, 190, 190, 0.4); }
    .projects .project-showcase .project-showcase-desktop::after {content: ''; display: block; width: 500%; height: 1px; position: absolute; bottom: -42px; left: -100%; background: rgba(190, 190, 190, 0.4);}
    .projects .project-showcase .project-showcase-desktop > div {width: 33.33%; transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none;}
    .projects .project-showcase .project-showcase-desktop > div:first-child {position: absolute; left: 0; top: 85px ; z-index: 299}
    .projects .project-showcase .project-showcase-desktop > div:nth-child(2) {margin: 0 auto 85px auto;}
    .projects .project-showcase .project-showcase-desktop > div:nth-child(2)::after {content: ''; display: block; height: 1px;}
    .projects .project-showcase .project-showcase-desktop > div:last-child {position: absolute; right: 0; top: 85px; z-index: 299}    
    .projects .project-showcase .project-showcase-desktop .project-block {height: 325px; margin: 0 10px 20px 10px; background-size: cover; background-position: center;}
    .projects .project-showcase .project-showcase-desktop .project-block .project-description {width:100%; height: 100%; z-index: 100; background: rgba(0, 0, 0, 0.5); opacity: 0;}
    .projects .project-showcase .project-showcase-desktop .project-block .project-description .description-container {position: absolute; bottom: 15px; left: 5px;}
    .projects .project-showcase .project-showcase-desktop .project-block .project-description:hover {opacity: 1;}    
    .projects .project-showcase .project-showcase-desktop .project-block .project-description label {margin-left: 16px; display: block;}
    .projects .project-showcase .project-showcase-desktop .project-block .project-description label:nth-child(1) {font-size: 1em}
    .projects .project-showcase .project-showcase-desktop .project-block .project-description label:nth-child(2) {font-size: 0.75em}    
}


/*PROJECT DETAILS*/
.project-details .presentation {height: 850px;}
.project-details .presentation label::after {}
.project-details .presentation label::before {}
.project-details .presentation label {max-width: initial; font-size: 1.8em;}
.project-details .presentation h2 {font-size: 4em;}
.project-details .data .intro-text label {font-size: 1.5em;}
.project-details .data .detail-text label {font-size: 1.2em}
.project-details .data .centered {width: calc(70% - 60px);}
.project-details .data .data-box {max-width: 600px; margin: 0 auto;}
.project-details .data .data-box .container {margin: 0 20px 0 0;}
.project-details .project-pictures .container {text-align: center;}
.project-details .project-pictures .container img {width: calc(70% - 60px);}

/*CLIENTS*/
.clients .intro {margin: 0 0 60px 0;}
.clients .client-showcase .client-logo {width: 200px; height: 140px; margin: 40px 25px 40px 25px; display: inline-block}