/*
 Theme Name:   Osquared Group 
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Osquared Group  - Investment Devlopers front window
 Author:       Paulo Sá - eudigital.pt
 Author URI:   http://eudigital.pt
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  osquaredgroup	
*/

/* Global */
html, body {
	 max-width: 100%;
    overflow-x: hidden;
}


@font-face {
	font-family: 'ogg-bold';
	src: url("fonts/ogg-bold.woff2") format("woff2"), url("fonts/ogg-bold.woff") format("woff"), url("fonts/ogg-bold.ttf") format("truetype");
	font-stretch: normal;
	font-weight: normal;
	font-style: normal
}
.ogg-bold {font-family: 'ogg-bold';}
@font-face {
	font-family: 'ogg-regular';
	src: url("fonts/ogg-regular.woff2") format("woff2"), url("fonts/ogg-regular.woff") format("woff"), url("fonts/ogg-regular.ttf") format("truetype");
	font-stretch: normal;
	font-weight: normal;
	font-style: normal
}


/* Tour Single --> */
.project-sub-title {margin-bottom: 30px;color: black;font-size: 36px}


.o2-label {position: relative}
.o2-label:before {content:"" ;position: absolute; width: 100px; height: 3px ; background: #0099A8;display: block;z-index: 99;top:24px}
.o2-label:after {content:"" ;position: absolute; width: 3px; height: 3px ; background: #0099A8;display: block;z-index: 99;top:24px}

.o2-label-left:before {left: -120px}
.o2-label-left:after {left: -128px}

.o2-label-right:before {right: -120px}
.o2-label-right:after {right: -132px}


.o2-label-h-5:before, .o2-label-h-5:after  {top:5px}
.o2-label-h-10:before, .o2-label-h-5:after  {top:10px}
.o2-label-h-15:before, .o2-label-h-15:after  {top:15px}
.o2-label-h-20:before, .o2-label-h-20:after  {top:20px}
.o2-label-h-25:before, .o2-label-h-25:after  {top:25px}
.o2-label-h-30:before, .o2-label-h-30:after  {top:30px}
.o2-label-h-40:before, .o2-label-h-40:after  {top:40px}
.o2-label-h-50:before, .o2-label-h-50:after  {top:50px}
.o2-label-h-60:before, .o2-label-h-60:after  {top:60px}
.o2-label-h-70:before, .o2-label-h-70:after  {top:70px}


.o2-label-h-5:before, .o2-label-h-5:after  {top:-5px}
.o2-label-h-10:before, .o2-label-h-10:after  {top:-10px}
.o2-label-h-15:before, .o2-label-h-15:after  {top:-15px}
.o2-label-h-20:before, .o2-label-h-20:after  {top:-20px}
.o2-label-h-25:before, .o2-label-h-25:after  {top:-25px}
.o2-label-h-30:before, .o2-label-h-30:after  {top:-30px}
.o2-label-h-40:before, .o2-label-h-40:after  {top:-40px}
.o2-label-h-50:before, .o2-label-h-50:after  {top:-50px}
.o2-label-h-60:before, .o2-label-h-60:after  {top:-60px}
.o2-label-h-70:before, .o2-label-h-70:after  {top:-70px}

.left-white-half-full {position: relative}
.left-white-half-full:before {content: ""; position: absolute; width: 100%; height: 100%; background: #ffffff; display: block; z-index: 99; top: 0; left: -100%;} 

.right-turquoise-half-full {position: relative}
.right-turquoise-half-full:after {content: ""; position: absolute; width: 100%; height: 184%; background: #0099A8; display: block; z-index: 1999; top: -84%; right: -100%;} 


#cefoeita-label-1.o2-label:after {top:150px !important}

#menu-button {position: fixed;right: 45px;z-index: 1}
.close {
  position: absolute;
   top: 36px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}
.close:hover {
  opacity: 1;
}

.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 7px;
  background-color: #fff;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

 

#os-header {
	position: fixed;top:0;left: 0;right: 0;
	padding: 0px !important;
	margin: 0px !important;
	background:  rgba(255,255,255,0.0) ;height: 180px;z-index: 5
}
#os-header, #os-header * {
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
#os-header #header-logo .elementor-image img {margin-top: 50px}
#os-header.shrinker {background:  rgba(255,255,255,0.8) ;height: 75px;top:0;}	
#os-header.shrinker #header-logo .elementor-image img {width: 50px ;margin-left: 0%;margin-top: 0px}
#os-header-menu {padding: 0;margin: 0;position: absolute}

#os-header .site-logo {background: url('img/osauqred-logo.svg');background-size: 130px 143px;;background-repeat: no-repeat;width: 130px;height: 150px;display: block;margin-top: 0px}
#os-header.shrinker .site-logo {background: url('img/osquared-logo-no-lettering.svg');width: 50px;height: 59px;background-repeat: no-repeat}
#os-header .site-logo:hover {margin-top: 10px;}
#os-header.shrinker .site-logo:hover {margin-top: 5px;}

#myNav-close-overlay {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	right:0;
	background-color: rgba(200, 200, 200, 0);
	overflow-x: hidden;  transition: 0.5s;
}

#myNav {z-index: 100}
#myNav .closebtn { display: block;margin: 0;padding: 0;font-size: 30px;top:60px; right:	 40px;display: block ; z-index: 101}
#myNav .closebtn:hover { -webkit-transform: rotate(90deg); transform: rotate(90deg);}



  
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999 !important;
  top: 0;
  right:0;
/*  background-color: #0099A8;
  background-color: #33647E;*/
  background: rgba(255,255,255,0.8);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: left;
  margin-top: 30px;
}

.overlay a {
	padding: 8px 8px 8px 80px;
	text-decoration: none;
	font-size: 36px;
	/* color:#0099A8; */
	color:#333;
	display: block;
	transition: 0.3s;
	/* font-family: "lft-etica-condensed", Sans-serif; 
	font-style: italic;
	*/
	font-family: 'ogg-bold';
	font-weight: 900;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	margin-left: 0px;
}

.overlay a:hover, .overlay a:focus {
	margin-left: 20px;
	color: #0099A8;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease; 
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.menu-lang-switcher li a {font-size: 12px ;}
.footer-switcher {font-size:12px;}

#intro-overlay {position: fixed;z-index: 999;top:0;right: 0;bottom: 0;left: 0;background: rgba(255,255,255); display:block;text-align: center;opacity: 0}
#intro-overlay img, #intro-overlay .intro-overlay-logo {display: block;position: absolute;top: 30%;left: 40%;width: 20%;}

.our-projects h1 {font-family: 'ogg-bold';font-size:60px;text-align: right;margin:50px 0px }
.our-projects-title.o2-label-left:before {left: -320px;width: 300px; top:50px}
.our-projects-title.o2-label-left:after {left: -328px; top:50px}



.project-item {float: left;display: block;width: 100%;clear: both;margin:105px 0 }
.project-item > * {display: block}
.project-item-img  {width: 45%;z-index: 0; }
.project-item-info  {width: 35%;padding: 30px;background-color: rgba(212, 239, 242, 0.8);display: block;;z-index: 1;margin-top: -30px}
.project-item-photo {width: 170px;height: auto;	margin-top: 0 }
.project-item-photo:hover {width: 170px;height: auto; margin-top: -10px }
 

.project-item:nth-child(odd) .project-item-img { margin-left: 20px; margin-right: -10% ;float: left}
.project-item:nth-child(odd) .project-item-info {margin-left: 0%;float: left; }
.project-item:nth-child(odd) .project-item-photo  {float: left} 
 

.project-item:nth-child(even) .project-item-img { margin-right: 20px; margin-left: -10% ;float: right}
.project-item:nth-child(even) .project-item-info {margin-right: 0%;float: right;  }
.project-item:nth-child(even) .project-item-photo {float: right;} 

.project-item .project-item-info h2{margin-bottom: 30px;position: relative;font-family: 'ogg-bold';}
.project-item .project-item-info h2::before {content: " ";position: absolute;display: block;width: calc(100% + 30px);left: -30px;top:50px;height: 1px; background: #0099A8}


.about-project-link {margin-top: 30px;display: block;float: left;font-family: 'ogg-bold';padding: 4px 12px;border: 1px solid rgba(0, 154, 168, 0.31)}
.about-project-link:hover {background: rgba(0, 154, 168, 0.31);border-color: rgba(0, 154, 168, 0.31)}
.animated-transition, .animated-transition:hover { transition: all 0.5s ease}

.footer-switcher li{list-style: none;}
#project-gallery .gallery-item img {padding: 20px !important;border: none !important}

.visible, .invisible {
  opacity: 0.0;
  transition: opacity 0.5s ease;
}
.visible {
  opacity: 1.0;
}
#myNav li {list-style: none}

.open-menu {width:50%}

/* AOS -url ->  michalsnik.github.io/aos/ */

@-webkit-keyframes fadeInRightSmooth {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(10%, 0, 0);
		transform: translate3d(10%, 0, 0)
	}
	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}

@media all and (max-width: 480px) {

}

 @media (max-width: 768px) {	
}
 

@media screen and (max-width: 480px) {
 	 
 	/* Menu */
 	.overlay.open-menu {width:70%;}
	.overlay a {font-size: 20px}


	/*  Project listing */
	.our-projects h1  .our-projects-title  {font-size: 35px}
	.our-projects h1  .our-projects-title::before,	.our-projects h1  .our-projects-title::after  {top: 35px !important}
	.project-item  {padding-top:230px;position: relative}
	.project-item .project-item-info {width: 90% !important;}
	.project-item .project-item-img {width: 120% !important;position: absolute;top: 40px}
	.project-item .project-item-photo {width: 35% !important;position: absolute;z-index: 1;top: 20px}

	.project-item .project-item-info h2 {font-size: 24px}


	.project-item:nth-child(odd) .project-item-img {width: 130% !important;position: absolute;top: 0px;right: 0}
	
	.project-item:nth-child(odd) .project-item-photo {left: 0}
	.project-item:nth-child(even) .project-item-photo {right: 0}


	.overlay .closebtn {font-size: 40px; top: 15px; right: 35px;}
}