@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Oswald:600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');

html {
	margin:0;
	padding:0;

}

body {
	
	margin:0;
	padding:0;
	

}

#bodyBlack {
	background-color: black;
	
}
#bodyBg {
	
	margin:0;
	padding:0;
	width: 100%;
	height: 100%;
	background-image: url("../images/infoBg01.jpg");
 	background-repeat: no-repeat;
  	background-attachment: fixed;
	background-position: center;
	background-size: cover;

}


#heroNav {
	position: absolute;
	font-family: 'Oswald', sans-serif;
	text-align: center;
	float:left;
	width: 100%;
}


#heroNav ul {
	clear: both;
	list-style: none;
	margin: 30vh auto 0 -2em;
	text-align: center;
	line-height: 2em;
	font-size: 1.3em
}


#heroNav li {
	margin:0;
	
	
}


#heroNav a {
	text-decoration: none;
	color: white;
	
}


#heroNav a:hover {
	color: firebrick;
	text-decoration: line-through;
	text-decoration-color: firebrick;
	
}



#heroNav a:visited {
	

	
}


#heroNav a:active {
	color: firebrick;
	
	
}

#heroNav ul img {
	
	margin: 0 0 0 0;
	position: relative;
	width: 250px;
	height: auto;
	background-size: cover;
}



/*----- burger menu------*/

/* CSS Document */

/* Scss Document */

.bmenu{
	visibility: visible;
	position: relative;
	background-color: white;
}

/* Basic Styles 
* {
  box-sizing: border-box;
}
*/

/* Toggle Functionality */
#toggle {
  display: none;
}
#toggle:checked ~ .toggle-container .button-toggle {
  box-shadow: 0 0 0 550px rgba(0, 0, 0, 1), inset 0 0 0 20px rgba(0, 0, 0, 1);
}
#toggle:checked ~ .toggle-container .button-toggle:before {
  transform: translateY(-50%) rotate(45deg) scale(1);
}
#toggle:checked ~ .toggle-container .button-toggle:after {
  transform: translateY(-50%) rotate(-45deg) scale(1);
}
#toggle:checked ~ .nav {
  margin-bottom: 100px;
  pointer-events: auto;
  transform: translate(50px, 50px);
}
#toggle:checked ~ .nav .nav-item {
  color: white;
	font-weight: 700;
  letter-spacing: 0;
  height: 40px;
  line-height: 40px;
  margin-top: 0;
  opacity: 1;
  transform: scaleY(1);
  transition: 0.5s, opacity 0.1s;
}
#toggle:checked ~ .nav .nav-item:nth-child(1) {
  transition-delay: 0.15s;
}
#toggle:checked ~ .nav .nav-item:nth-child(1):before {
  transition-delay: 0.15s;
}
#toggle:checked ~ .nav .nav-item:nth-child(2) {
  transition-delay: 0.1s;
}
#toggle:checked ~ .nav .nav-item:nth-child(2):before {
  transition-delay: 0.1s;
}
#toggle:checked ~ .nav .nav-item:nth-child(3) {
  transition-delay: 0.05s;
}
#toggle:checked ~ .nav .nav-item:nth-child(3):before {
  transition-delay: 0.05s;
}
#toggle:checked ~ .nav .nav-item:nth-child(4) {
  transition-delay: 0s;
}
#toggle:checked ~ .nav .nav-item:nth-child(4):before {
  transition-delay: 0s;
}
#toggle:checked ~ .nav .nav-item:before {
  opacity: 0;
}
#toggle:checked ~ .dummy-content {
  padding-top: 30px;
}
#toggle:checked ~ .dummy-content:before {
  background-color: rgba(0, 0, 0, 0.5);
}
/* Toggle Button */
.button-toggle {
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 25px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  border-radius: 100%;
  transition: 0.6s;
}
.button-toggle:hover {
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.8), inset 0 0 0 20px rgba(0, 0, 0, 0.8);
}
.button-toggle:before, .button-toggle:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: white;
  border-radius: 5px;
  transition: 0.5s;
}
.button-toggle:before {
  transform: translateY(-50%) rotate(45deg) scale(0);
}
.button-toggle:after {
  transform: translateY(50%) rotate(-45deg) scale(0);
}
/* Menu */
.nav {
  display: inline-block;
  margin: 25px 25px 20px;
  pointer-events: none;
  transition: 0.5s;
	
}


.nav-item {
  position: relative;
  display: inline-block;
  float: left;
  clear: both;
  color: transparent;
  font-size: 22px;
  letter-spacing: -6.2px;
  height: 7px;
  line-height: 7px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleY(0.2);
  transition: 0.5s, opacity 1s;
  font-family: 'Oswald', sans-serif;
}

.nav-item:active{
	
	color:firebrick;
}


.nav-item:hover{
	
	color:firebrick;
}

.nav-item:nth-child(1) {
  transition-delay: 0s;
}
.nav-item:nth-child(1):before {
  transition-delay: 0s;
}
.nav-item:nth-child(2) {
  transition-delay: 0.05s;
}
.nav-item:nth-child(2):before {
  transition-delay: 0.05s;
}
.nav-item:nth-child(3) {
  transition-delay: 0.1s;
}
.nav-item:nth-child(3):before {
  transition-delay: 0.1s;
}
.nav-item:nth-child(4) {
  transition-delay: 0.15s;
}
.nav-item:nth-child(4):before {
  transition-delay: 0.15s;
}
.nav-item:nth-child(1) {
  letter-spacing: -8px;
}
.nav-item:nth-child(2) {
  letter-spacing: -7px;
}
.nav-item:nth-child(n + 4) {
  letter-spacing: -8px;
  margin-top: -7px;
  opacity: 0;
}
.nav-item:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black;
  transform: translateY(-50%) scaleY(5);
  transition: 0.5s;
	
}
/* Dummy Content */
.dummy-content {
  position: relative;
  text-align: center;
  transition: 0.5s;
}
.dummy-content:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 2;
  transition: 0.5s;
}
.circle {
  display: inline-block;
  width: 75px;
  height: 75px;
  background-color: black;
  border-radius: 100%;
}
.text {
  margin: 15px 0 30px;

}
.text span {
  display: inline-block;
  height: 10px;
  margin: 0 5px;
  background-color: black;
  border-radius: 5px;
}
.text span:first-child {
  width: 50px;
}
.text span:last-child {
  width: 80px;
}
.square-top {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 300px;
  background-color: black;
  z-index: 1;
}
.square-behind {
  display: inline-block;
  position: relative;
  top: -256px;
  width: 250px;
  height: 210px;
  background-color: black;
}
.square-behind:before, .square-behind:after {
  position: absolute;
  content: '';
  top: 0;
  width: 40%;
  height: 100%;
}


/*-----Main Menu -----*/


#mainNav {
	visibility: hidden;
	height: 0px;
	width: 0px;
	position: relative;
	font-family: 'Oswald', sans-serif;
	
	
}



#mainNav ul {
	list-style: none;
	
	
}


#mainNav li {
	
	
	
}


#mainNav a {
	
	
}


#mainNav a:hover {
	
	
}


#mainNav a:visited {
	
	
}


#mainNav a:active {
	
	
	
}

.logoMainMenu {
	
	visibility: hidden;
	height: 0px;
	width: 0px;
	background-image: url(../images/logoAltMenu.svg);
}




/*----- Headers and Text-----*/


h1 {
	font-family: 'Oswald', sans-serif;
	font-size: 3em;
	line-height: 1.1em;
	margin: 0 .15em;
}

h2 {
	font-family: 'Oswald', sans-serif;
	margin: 0 .35em;
}

h3 {
	font-family: 'Oswald', sans-serif;
	margin: 0 .5em;
	margin: 0 .15em;
	
}

p {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1em;
	margin: .5em;
	
}

/*-------Sections ----- */

#heroGal {
	width: 100%;
	height: 100vh;
	background-color: black;
	position: relative;
	top:0px;
	z-index: -100;
	
}



#mainContainer {
	height: auto;
	margin:0;
	padding:0;
	
}

.infoBlock {
	position: relative;
	padding-bottom: 1em;
	
}



    #weBelieve .imgBlock {

	position: relative;
	width: 100%;
	height: 50vh;
	background-color: aqua;
	background-image: url("../images/original_ideas_design_studio.jpg");
	background-size: cover;
	
	
}
	
	#weAre .imgBlock {

position: relative;
	width: 100%;
	height: 50vh;
	background-color: aqua;
	background-image: url("../images/dosmaquinas_strategy_for_brands_monterrey_leon_mexico_san_antonio_01.jpg");
	background-size: cover;
	background-position: center;
	
	
}

.imgBlockMain {
	visibility: visible;
	display: block;
	width: 0;
	height: 0;
	float: right;
	margin:0;
	
	
	
}

#weAre {
	
	position: relative;
	background-color: dimgrey;
	color:white;
	overflow-x: hidden;
	
	
	
}


#weDo {
	position: relative;
	overflow-x: hidden;

	
}
	#weDo .infoBlock p {
		color:black !important;
	}

#weBelieve {
	position: relative;
	background-color: dimgrey;
	color:white;
	clear: both;
	overflow-x: hidden;
}

#recent {
	position: relative;
	background-color: dimgrey;
	color:white;
	padding-bottom: .5em;
	padding-top: .5em;
	clear: both;
	overflow-x: hidden;
}

#recentGallery {
	min-height: 500px;
	height:auto;
	position: relative;
	width: 100%;
	margin-bottom: 50px;
	z-index: 100;
	display: block;
	clear: both;
}

#contact {
	
	height:auto;
	position: relative;
	margin: 0;
	padding: 0;
	clear: both;
	background-color: white;
	color: black;
	
}

#contactData {
	
	width: 100%;
	margin: 0;
	
	
}

#contactData p {
	color:black;
}

#contactBlock {
	width: 100%;
	height: 100%;
	margin-bottom: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
		color: black;
	
}

#altInfo {
		position: relative;
		margin:0;
		color: white;
		border-bottom: thin;
		border-color: white;
		border-bottom-style: solid;
		padding: 0 0 .2em 0;
		
		
	}	

.altBlock {
		color: white;
		float:left;
		width: 100%;
		height: 70px;
		border-bottom: thin;
		border-color: white;
		border-bottom-style: solid;
		padding: 0 0 .2em 0;
		
	}	


#altInfo h2{
	
	float:left;
	margin: 7px 0 0 .2em;
	font-size: 3em
}

#altInfo h1{
	
	font-size: 4em;
	line-height: 1em;
}

.altContent {
		width: 100%;
		height: auto;
		color: white;
		
}

	.altContent  h1 span{
	margin-top: 15px;
		margin-bottom: 50px;
	font-size: .6em;
	line-height: 1em;
	display: block;
	float:left;
}
	

.infoSpace {
	
	width: 100%;
	height: auto;
	position: relative;
	color: white;
	border-top: thin;
	border-top-style: solid;
	padding: .3em 0 .3em 0;
	border-bottom: thin;
	border-bottom-style: solid;
	

}

.infoSpace h1 {
	

	
}

.infoSpace h2 {
	line-height: 1.1em;
	margin-top: .3em;
	border-top: thin;
	border-color: white;
	border-top-style: solid;
	padding: .3em 0 0 0;
	width: 100%;
	
}

.infoSpace p {
	
	margin-top: 1em;
	line-height: 1.1em;
	font-family: 'Oswald', sans-serif;

	width: 100%;
	
}

.infoSpace img {
	
	width: 100vw;
	
}

.infoText {
	
	float:left;
	WIDTH: 80%;
}

#altInfo .icon{
	
	margin: 0 0 0 .5em;
	width: 50px;
	float:left;
	
}

#projectInfo {
	
	float: left;
	position: relative;
	margin-top: 20px;
	height: 100%;
	margin-bottom: -250vh;
}

#projectInfo h1{
	
	font-size: 11.5vw;
	text-align: Left;
	margin-bottom: 5px;
	margin-left: .2em;
}



#projectInfo p{
	width: 97%;
	text-align: left;

}

#projectInfo h2{
	
	margin-left: 2vw;
	padding-bottom: 10px;
	font-size: 16vw;
	line-height: 15vw;
	border-bottom: medium;

	border-bottom-style:solid;
	border-top: medium;

	border-top-style:solid;
}


/*---- Images ------*/


.icon {
	height: 90px;
	margin: 1em 0 .1em .5em;
}


.imgBlock img {
  
	
}

#social img {
	height: 30px;
	margin-right: 10px
	
}

.iconFooter {
	
	height: 50px;
		margin: 0 auto 1em auto;
	
}



	#projectBg {
	
	position: relative;
	z-index: -1000;
	height: 120vh;
	width: 100%;
	background-color: white;
	margin: 0;

	
}
	
		#projectBg img{
		object-fit:cover;
		resize: both;
		width: 100%;
		height: 100%;
		object-position: center;
		opacity: .5;
		padding: 0;

		
	}


	
.portItem01 {
	
	height: 100%;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 100%;
	margin-bottom: -6px;
}
	




.portItem02 {
	
	height: 100%;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 100%;
	margin-bottom: -6px;
	
}

.portItem02Mob {
	
	height: 0vh;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 00%;
	visibility: hidden;
	
}

.portItem03 {
	
	height: auto;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 100%;
	margin-top: 50px;
	padding: 0 1em 2em 1em;

	
}

.portItemMobileV {
	
	height: 100%;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 100%;
	visibility: visible;

	
}

		.portItemMobileH {
	
	height: 0vh;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 0%;
	visibility: hidden;

	
}


.portItemVert {
	
	height: 100%;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 100%;
	margin-top: -6px;
	margin-bottom: -6px;
}


.portItemVid {
	
	margin-bottom: -5px;
	background-color: black;
	position: relative;
	object-fit: cover;
	width: 100%;

	
}

.portItemMobile {
	
	height: 100%;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 100%;
	visibility: visible;
	margin-bottom: -6px;

	
}


	.portItem01 img, .portItem02 img, .portItem02Mob img, .portItem03 img, .portItemVert img, .portItemMobile img, .portItemMobileH img, .portItemMobileV img {
		
		object-fit: cover;
		resize: both;
		width: 100%;
		height: 100%;
		object-position: center;
		
		
	}


/*----- GALLERY ----*/

.itemDesc  h4{
	font-family: 'Oswald', sans-serif;
	text-align: center;
	margin: 30% 0 0 0;
	color: white;
	
}


.itemDesc p {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: .7em;
	text-align: center;
	margin-top: 0em;
	margin-bottom: 0px;
	color: white
}


.galItem1, .galItem4 {
	display: block;
	float:left;
	background-color: black;
	margin: 0 0 0 0;
	width: 50%;
	height: 50%;
	overflow: hidden;

	
	
}

.galItem2, .galItem5 {
	display: block;
	float:left;
	background-color: firebrick;
	margin: 0 0 0 0;
	width: 50%;
	height: 50%;
	overflow: hidden;
	

}


.galItem3, .galItem6 {
	display: block;
	float:left;
	background-color: dimgray;
	margin: 0 5px 0 0;
	width: 100%;
	height: 30%;
	overflow: hidden;


}


.galItem1 img, .galItem2 img, .galItem3 img, .galItem4 img, .galItem5 img, .galItem6 img {

	background-size: cover;
	 display: block;
 	 width: 100%;
 	 height: auto;
	  opacity: 1;
  transition: .5s ease;
	
	
	
}





.itemDesc {
  position: relative;
  height: 100%;
  width: 100%; 

	
}





#recentGallery img{

  	opacity: 1;
	width: 100%;
	height: auto;
	background-size: cover;	
	margin: -69% auto auto auto;
	
}



#recentGallery img:hover{
  opacity: .1;
}

/*----1024 + Gallery ---*/



/*----footer---*/

footer {
	background-color: dimgrey;
	padding: 1em;
	text-align: center;
	
}

#social {
	width: auto;
	margin: 1em 30% 0 29% ;
	align-content: center;
	
}

#subfooter {
	
	
}

footer img {
	
	
}


/*----- Footer Text ------*/


footer ul {
	list-style: none;
	text-align: center;
	margin: 0 auto 0 -3em;
}



footer li {
	
	font-family: 'Oswald', sans-serif;
	
}


footer a {
	color: white;
	text-decoration: none;
	
}


footer a:hover {
	color: firebrick;
	
}


footer a:visited {
	
	
}


footer a:active {
	
	color: firebrick;
	
}

.footerBottom {
	font-size: .6em;
	text-align: center;
	color: white;
	
}


/*-----Carousel css-----*/
.cb-slideshow,
.cb-slideshow:after { 
	
	
	height: 100vh;
	width: auto;
	position: relative;
	margin-top: 0px;
	z-index: 11;
	opacity: .35;
	list-style-type: none;
	overflow-x:hidden;
	

}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    text-align: left;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'Hind Madurai', sans-serif;
    font-size: 3.5em;
    padding: 0 0 0 .3em;
  	line-height: .8em;
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
.cb-slideshow li:nth-child(2) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}



@media (min-width:1024px){
	
	.bmenu{
	visibility: hidden;
	height: 0px;
}
	
	
	#heroNav {
	position: absolute;
	font-family: 'Oswald', sans-serif;
	width: 900px;	
	margin-top: -60vh;
	margin-left: auto;
	margin-right: auto;
	display: block;
	left: 0;
	right: 0;
	padding:0;
	z-index: 2000;
	

}


#heroNav ul {
	clear: both;
	list-style: none;
	margin: -1em 0 0 0;
	padding: 0 0 0 0;
	line-height: 1.5em;
	font-size: 1.3em;
	float:left;
	
	
}


#heroNav li {
	margin:0;
	text-align: right;
	
}


#heroNav a {
	text-decoration: none;
	color: white;
	
}


#heroNav a:hover {
	color: firebrick;
	text-decoration: line-through;
	text-decoration-color: firebrick;
	
}



#heroNav a:visited {
	

	
}


#heroNav a:active {
	color: firebrick;
	
	
}

#heroNav ul img {
	
	margin: 0 0 0 0;
	position: relative;
	width: 0px;
	height: auto;
	background-size: cover;
	visibility: hidden;
}
	
		.logoMainMenu {
	
	visibility: visible;
	height: 220px;
	width: 723px;
	background-image: url(../images/logoAltMenu.svg);
	background-repeat: no-repeat;
	float:left;
	display: block;
	margin: 0 0 0 1em;	
			
}



/*-----Main Menu -----*/

	
	
	#mainNav {
	visibility: visible;
	height: 110px;
	position: sticky;
	font-family: 'Oswald', sans-serif;
	width: 100%;	
	margin-left: auto;
	margin-right: auto;
	display: block;
	left: 0;
	right: 0;
	top:0;
	background: black;
	margin-top:100vh;
	z-index: 1000;
	
}



#mainNav ul {
	
	
	list-style: none;
	float:left;
	clear: both;
	margin: 0px 0 0 -1.3em;
	
	
}

	#mainNav img {
		float:left;
		width: 400px;
		margin: 5px 0 0 1em;
		
	}

#mainNav li {
	display: inline-block;
	margin-right: .5em;
	font-size: 1em;
	
	
}


#mainNav a {
	text-decoration: none;
	color: white;
	
}


#mainNav a:hover {
	color: firebrick;
	text-decoration-color: firebrick;
	
}


#mainNav a:visited {
	
	
}


#mainNav a:active {
	color: firebrick;
	
	
}

	.lenguageMenu {
		
		float:right;
		color: white;
		margin-right: 2em;
	}	


/*----- Headers and Text-----*/


h1 {
	font-family: 'Oswald', sans-serif;
	font-size: 5em;
	line-height: 1em;
	margin: 0 .15em;
}

h2 {
	font-family: 'Oswald', sans-serif;
	margin: 0 .35em;
}

h3 {
	font-family: 'Oswald', sans-serif;
	margin: 0 .5em;
	margin: 0 .15em;
	
}

p {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1em;
	margin: .5em;
	
}

/*-------Sections ----- */

#heroGal {
	width: 100%;
	height: 100vh;
	background-color: black;
	position: absolute;
	top:0px;
	z-index: -1000;
	margin-bottom: 140px;
	
}



#mainContainer {
	height: auto;
	margin:0;
	padding:0;
	overflow-x: hidden;
	
}

.infoBlock {
	
	padding-top: 1em;
	width: 50vw;
	display: block;
	float:inherit;
	
	
}
	
	.infoBlock p {
		width: 60%;
		
	}	
	

    #weBelieve .imgBlock {

	display: block;
	width: 46vw;
	height: 700px;
	background-color: #222222;
	float: right;
	margin:0;
	text-align: center;
	background-image: url("../images/original_ideas_design_studio.jpg");
	background-size: cover;
	color:white;
	
	
}
	
	#weAre .imgBlock {

	display: block;
	width: 46vw;
	height: 700px;
	background-color: #222222;
	float: right;
	margin:0;
	text-align: center;
	background-image: url("../images/dosmaquinas_strategy_for_brands_monterrey_leon_mexico_san_antonio_01.jpg");
	background-size: cover;
		color:white;
	
	
	
	
}
	
.imgBlockMain {
	visibility: visible;
	display: block;
	width: 46vw;
	height: 700px;
	background-color: firebrick;
	float: left;
	margin:0;
	background-image: url("../images/branding_tecnomix_dosmaquinas_branding_monterrey_leon_mexico_san_antonio.jpg");
	background-size: cover;
	
	
}	

#weAre {
	
	position: relative;
	background-color: dimgrey;
	color:white;
	width: 100vw;
	padding: 0 1em 0 1em;
	height: 650px;
	float:left;
	overflow-y: hidden;
	
	
	
	
	
}


#weDo {
	position: relative;
	background-color: white;
	color:black;
	width: 100vw;
	padding: 0 1em 0 1em;
	height: 650px;
	float:right;
	overflow: hidden;
	

	
}
	#weDo .infoBlock p {
		color:black !important;
	}
	
#weDo	.imgBlock {
	visibility: hidden;
	display: block;
	width: 0px;
	height: 0px;
	background-color: aqua;
	float: right;
	margin:0;
	
	
	
}


#weBelieve {
	position: relative;
	background-color: dimgrey;
	color:white;
	width: 100vw;
	padding: 0 1em 0 1em;
	height: 650px;
	float:left;
	overflow-y: hidden;

}

#recent {
	position: relative;
	background-color: black;
	color:white;
	padding-bottom: .5em;
	padding-top: .5em;
	clear: both;
	
}

#recentGallery {
	min-height: 500px;
	height:auto;
	position: relative;
	width: 100%;
	margin-bottom: 50px;
	z-index: 100;
	display: block;
	clear: both;
}

#contact {
	
	height:auto;
	position: relative;
	margin: -7px 0 0 0;
	padding: 0;
	clear: both;
	background-color: white;
	
	
	
}

#contactBlock {
	width: 100%;
	height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 200px 0 200px 0;
	

	
}
	
#altInfo {
		position: relative;
		margin: 1em 2.5% 0 2.5%;
		color: white;
		border-bottom: thin;
		border-color: white;
		border-bottom-style:solid;
		padding: 0 0 1.5em 0;
		min-height: 360px;
		height: auto;
		
		
	}	


	
.altBlock {
		color: white;
		float:left;
		width: 100%;
		height: 75px;
		border-bottom: thin;
		border-color: white;
		border-bottom-style:solid;
		padding: 0 0 .2em 0;
		
	}	


#altInfo h2{
	
	float:left;
	margin: 7px 0 0 .1em;
	font-size: 3em
}

#altInfo h1{
	
	font-size: 5.5em;
	line-height: 1em;
	display: block;
	float:left;
}




.altContent {
		width: 100%;
		height: auto;
		color: white;
		display: block;
	
	
}
	
	.altContent  h1 span{
	margin-top: 15px;
	font-size: .78em;
	line-height: 1em;
	display: block;
	float:left;
}
	
	

.infoSpace {
	
	width: 95%;
	height: auto;
	position: relative;
	color: white;
	padding: .3em 0 .3em 0;
	margin: 0 2.5% 0 2.5%;

}

	.infoSpace h1 {
		
		font-size: 4em;
		
	}
	
		.infoSpace h1 span{
		
		font-size: .7em;
			line-height: .3em;
		
	}


.infoSpace h2 {
	line-height: 1.1em;
	margin-top: .3em;


	padding: .3em 0 0 0;
	width: 100%;
	
}

.infoSpace p {
	
	margin-top: 1em;
	line-height: 1.1em;
	font-family: 'Oswald', sans-serif;
	
	width: 100%;
	
}

.infoSpace img {
	
	width: 440px;
	height: 290px;
	margin-left: 7.8em;
	
	
}

.infoText {
	display:block;
	float:left;
	width: 400px;
	
}

#altInfo .icon{
	
	margin: 1em 0 0 .5em;
	width: 50px;
	float:left;
	
}
	
#altInfo p{
		width: auto;
		max-width: 45%;
		float:left;
		display: block;
		margin: 2% 0 5% 3em;
	
	
	}
	
#projectInfo {
	
	float: left;
	position: relative;
	width: 46%;
	margin-top: 20px;
	height: 100%;
	min-height: 80%;	
	margin-bottom: -250vh;
}
	
	
	#projectInfo span {
	
color: white !important;

}
	

#projectInfo h1{
	
	font-size: 4vw;
	text-align: left;
	margin-bottom: 5px;
}

#projectInfo p{
	margin-left: 1.5vw;
}

#projectInfo h2{
	
	margin-left: 1vw;
	margin-right: 10px;
	padding-bottom: 10px;
	font-size: 8vw;
	line-height: 7vw;
	border-bottom :medium;

	border-bottom-style:solid;
	border-top: medium;
	
	border-top-style:solid;
}	
	



/*---- Images ------*/


	
.icon {
	height: 55px;
	margin: 1em 0 .1em .8em;
}

.imgBlock img {
	height: 100%;
	
	
}

#social img {
	height: 30px;
	margin-right: 10px
	
}

.iconFooter {
	
	height: 50px;
	margin: 0 auto 1em auto;
	
}
	
	
		#projectBg {
	
	position: relative;
	z-index: -1000;
	height: 100%;
	width: 100%;
	background-color: white;
	margin-bottom: -105vh;
}
	
		#projectBg img{
		object-fit: cover;
		resize: both;
		width: 100%;
		height: 100%;
		object-position: center;
		opacity: 1;
		

		
	}






.portItem01 {
	
	height: 100%;
	background-color: white;
	position: relative;
	margin-top: 100vh;
	object-fit: cover;
	width: 100%;
	margin-bottom: -6px;
}


.portItem02 {
	
	height: 100%;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 100%;
	margin-bottom: -6px;
	
}
	
	.portItem02Mob {
	
	height: 100vh;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 100%;
	visibility: visible;

	
}

.portItem03 {
	
	height: auto;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 100%;
	margin-top: 50px;
	padding: 0 3em 2em 3em;

	
}

.portItemVert {
	
	height: 100%;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 100%;
	margin: -7px 0 -7px 0;
	
}
	
	.portItemMobile {
	
	height: 0vh;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 0%;
	visibility: hidden;
	margin:0;
	
}
	
	.portItemMobileV {
	
	height: 0vh;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 0%;
	visibility:hidden;
	margin:0;

	
}
	
		.portItemMobileH {
	
	height: 100%;
	background-color: white;
	position: relative;
	object-fit: cover;
	width: 100%;
	visibility:visible;
	margin-top:-6px;
	padding-bottom: 0px;

	
}
	
	
	
	.portItem01 img, .portItem02 img, .portItem02Mob img, .portItem03 img, .portItemVert img, .portItemMobile img, .portItemMobileH img, .portItemMobileV img{
		
		object-fit: cover;
		resize: both;
		width: 100%;
		height: 100%;
		object-position: center;
		
		
	}


/*----- GALLERY ----*/

.itemDesc  h4{
	font-family: 'Oswald', sans-serif;
	text-align: center;
	margin: 0 0 0 0;
	color: white;
	font-size: 2em;
	
}


.itemDesc p {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1em;
	text-align: center;
	margin-top: 0em;
	margin-bottom: 0px;
	color: white
}



	
	

.galItem1 img, .galItem2 img, .galItem4 img, .galItem5 img, .galItem6 img {

	
	 display: block;
	 opacity: 1;
  	transition: .5s ease;
	
	
	
}



.galItem1, .galItem4 {
	display: block;
	float:left;
	background-color: black;
	margin: 0 0 0 0;
	width: 50%;
	overflow: hidden;
	padding-top: 4%;
	
	
}

.galItem2, .galItem5 {
	display: block;
	float:left;
	background-color: firebrick;
	margin: 0 0 0 0;
	width: 50%;
	padding-top: 4%;
	overflow: hidden;
	

}


.galItem3, .galItem6 {
	display: block;
	float:left;
	background-color: dimgray;
	margin: 0 5px 0 0;
	width: 100%;
	height: 69vh;
	overflow: hidden;
	padding-top: 7%;
}



.itemDesc {
  position: relative;
  height: auto;
  width: auto; 
  margin-top:23vh;

	
}



#recentGallery .galItem1 img, #recentGallery .galItem4 img{

	object-fit: cover;
	display: block;
	opacity: 1;

	width: 100%;
	height: 90vh;
	
}
	
#recentGallery .galItem2 img, #recentGallery .galItem5 img{

	object-fit: cover;
	display: block;
	opacity: 1;

	width: 100%;
	height: 90vh;

		
	
}
	
	#recentGallery .galItem3 img, #recentGallery .galItem6 img{

	object-fit: cover;
	display: block;
	opacity: 1;
	margin: -555px auto 0 auto;
	width: 100%;
	height: 110vh;
	

	
}





#recentGallery img:hover{
  opacity: .1;
}
	
	



/*----1024 + Gallery ---*/



/*----footer---*/

footer {
	background-color: dimgrey;
	padding: 1em;
	text-align: center;
	
}

#social {
	width: auto;
	margin: 1em 30% 0 29% ;
	align-content: center;
	
}

#subfooter {
	
	
}

footer img {
	
	
}


/*----- Footer Text ------*/


footer ul {
	list-style: none;
	text-align: center;
	margin: 0 auto 0 -3em;
}



footer li {
	
	font-family: 'Oswald', sans-serif;
	
}


footer a {
	color: white;
	text-decoration: none;
	
}


footer a:hover {
	color: firebrick;
	
}


footer a:visited {
	
	
}


footer a:active {
	
	color: firebrick;
	
}

.footerBottom {
	font-size: .6em;
	text-align: center;
	color: white;
	
}
	
}

/* Contact Form
=================== */

    .form-container {
      padding: 5%;
      background: black;            
      width: 100%;
	  margin: 1em 0 1em 0;
	  border-radius: 0px;
	color:white;
		
    }


input {
	
	height:2em;
	margin: .7em 0 .5em 0;
}

label {
	
	color:grey;
	font-weight: 200;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	

}

.button-primarys {
	
	background-color: firebrick;
	color: white;
	border: none;
	margin: .5em 0 0 0 ;
	padding: 0 1em 0 1em;
	height: 4em;
	width: 30%;
	border-radius: 5px;
	font-weight: 500;
	
}

.button-primarys:hover {
	
	background-image: linear-gradient(to bottom right, rgba(65,65,65,1.00), rgba(38,38,38,1.00));

}





input, textarea , button
{
  width: 100%;
}    
textarea
{
  height: 200px;
}




#contact label{
  display: block;
  margin-top: 10px;
  font-weight: bold;
  color: grey;
	font-size:1.2em;
	margin-bottom: .2em;
}
#contact input, #contact textarea{
  width: 100%;
  box-sizing: border-box;
	margin-bottom: 1em;
}
#contact input[type=text], #contact input[type=email]{
  padding: 10px;

}

#contact textarea{
	min-height:200px;
	height: auto;
	
}
#contact input[type=submit]{
  background-color: orange;
  border: 0;
  margin-top: 10px;
  padding: 10px;
  color: grey;
	font-size: 1em;
	font-weight: 700;
	border-radius: 5px;
}

#contact input[type=submit]:hover{
	background-color: orange;
	
}