@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');

body{ 	

	--color: #25292E;
	--font: 'Roboto', sans-serif;

}


html, body {height: 100%;width: 100%;width: 100vw; margin: 0; padding: 0; left: 0; top: 0; font-size: 100%;}

/* ROOT FONT STYLES */

body{ background-color:#FFF;}
* { font-family: 'Roboto', sans-serif;}

header{background-color: var(--color);height: 65px; position: absolute; top: 0px; width: 100%; text-align: center; color:#fff; padding:0 20px;  
	   box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);z-index: 101;
	   -webkit-transition: all 400ms; -moz-transition: all 400ms; -o-transition: all 400ms; -ms-transition: all 400ms; transition: all 400ms;}
header .logo {padding-top: 18px;display:inline-block; float:left;}
header .logo a{color:#fff; text-decoration: none;font-weight: 400;font-size: 24px;}

/* NAVIGATOR */


.navbar{display:inline-block; float:right;}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center  
}

.navbar li {
   display: inline-block;

}

.navbar li a {
    display: block;
    color: #f1f1f1;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.navbar li a:hover {color:orange;}
/* TYPOGRAPHY */

h1 { font-size: 2.3rem; }
h2 { font-size: 1.8rem;}
h3 { font-size: 1.375rem;}
h4 { font-size: 1.125rem;}
h5 { font-size: 1rem;}
h6 { font-size: 0.875rem;}

p { font-size: 1.125rem; font-weight: 200; line-height: 1.8; }

.font-light 	{ font-weight: 300; }
.font-regular 	{ font-weight: 400; }
.font-heavy 	{ font-weight: 500; }


/* POSITIONING */
.left {  text-align: left;}
.right {  text-align: right;}
.center {  text-align: center;  margin-left: auto;  margin-right: auto;}
.justify { text-align: justify;}


/* ==== GRID SYSTEM ==== */

.container {  width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto;}
.container-fluid {  width: 100%; margin-left: auto; margin-right: auto;}

.row {  position: relative;  width: 96%; }
.row [class^="col"] {   float: left;  margin: 0.5rem 2%;  min-height: 0.125rem; }

.first-block h1 img{ width:40px; box-shadow: 0 0 4px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.28);}

.block{ padding:55px 10px; border-bottom:1px solid #ccc}

  .col-1 { width: 4.33%; }
  .col-2 {  width: 12.66%; }
  .col-3 {  width: 21%; }
  .col-4 {  width: 27.33%; }
  .col-5 {  width: 37.66%; }
  .col-6 {  width: 46%;}
  .col-7 {  width: 54.33%;}
  .col-8 {   width: 62.66%;}
  .col-9 {  width: 71%; }
  .col-10 {   width: 79.33%; }
  .col-11 {   width: 87.66%; }
  .col-12 {   width: 96%; }

  .hidden-sm {  display: block; }

.col-1-sm   { width: 4.33%; }
.col-2-sm   { width: 12.66%; }
.col-3-sm   { width: 21%;}
.col-4-sm   { width: 29.33%;}
.col-5-sm   { width: 37.66%;}
.col-6-sm   { width: 46%;}
.col-7-sm   { width: 54.33%;}
.col-8-sm   { width: 62.66%;}
.col-9-sm   { width: 71%;}
.col-10-sm  { width: 79.33%;}
.col-11-sm  { width: 87.66%;}
.col-12-sm  { width: 96%;}



.row::after {   content: "";    display: table; clear: both;}

.hidden-sm {  display: none;}




@media only screen and (max-width: 45em) {  /* 720px */

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 100%;
}

.sidebar{display:none;}
}



/* WELCOME DIV */

#welcome{ 	margin-top: 65px; height: calc(90vh - 100px); 
			 max-height: 720px;
			 min-height: 500px;
			    background-color: #2C3137;
    		-webkit-transition: all 400ms;
    		-moz-transition: all 400ms;
    		-o-transition: all 400ms;
    		-ms-transition: all 400ms;
    		transition: all 400ms;}


#welcome  h1{ font-size: 54px;color: #fafafa;line-height: 1.25 !important;font-weight:300;
						-webkit-font-smoothing: antialiased;margin-bottom: 16px !important;}
#welcome  h2{ font-size: 26px;font-weight:300;color: #fff;-webkit-font-smoothing: antialiased;}
#welcome  a{ font-size: 16px;font-weight: 500;color: #fff; -webkit-font-smoothing: antialiased;}


  /*-------------------------*/
 /*     ABOUT               */
/*					       */


/* TABS */

#tabs{background-color: #fff;z-index: 1001; border-bottom: 1px #eaecef solid;position: relative;z-index: 3}
.tabscontainer{position: relative;top:0px;transition: top ease-out 0.2s;margin:auto;}
.tabsimg{max-height: 60px;position: relative;top:0px;color: #000;
				 	    	-webkit-transition: opacity .4s ease-in-out,top ease-out 0.2s;
    -moz-transition: opacity .4s ease-in-out,top ease-out 0.2s;
    -o-transition: opacity .4s ease-in-out,top ease-out 0.2s;
    transition: opacity .4s ease-in-out,top ease-out 0.2s;}
.tabstxt{   color: #24292e!important;line-height: 1.25 !important; font-size: 14px;}


 #tabs a{color: #24292e!important;text-decoration: none;}


#tabs ul li a:hover >  img{ top:-7px!important; }


#tabs ul li 	{display: inline-block; width:20%; text-align: center;margin-right: -4px;}
#tabs ul li a 	{display: inline-block;width: 100%;padding: 30px 0px;}


.fixed {
	z-index: 3;
	position: fixed!important;
	border-bottom: 1px #eaecef solid;
	background-color:rgba(255, 255, 255, 0.5);
	top:-150px;
	transform: translate(0px, 70px);
	width: 100%;
	transition: all .3s ease 0s;
}

.fixed::after {
    position: absolute;
    right: 0;
    bottom: -12px;
    left: 0;
    z-index: -1;
    display: block;
    height: 12px;
    content: "";
    background: linear-gradient(rgba(0,0,0,0.075), rgba(0,0,0,0.001)) repeat-x 0 0;
    }

 .fixed:hover{ top:-70px;
	
}

 .fixed:hover  .tabsimg{  opacity:1!important; }

.fixed:hover > .tabscontainer{

  top:0px!important;
	 -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;	
}
#aftertabs{background-color:#fff;position: relative;z-index: 2;}
#aftertabs .container{padding: 80px 0px; text-align: center}




.content{border-bottom: 1px solid #eaecef;}

.content .container{padding: 80px 0px; text-align: center;}
.content .container span{color: #586069;}
.content .container h2{font-size: 54px;font-weight: 300;}
.content .container p{color:#24292e;margin:auto auto; font-size: 18px; font-weight: 300;max-width: 600px;}






.sumary{}
.sumarywrap{border:1px solid #f1f1f1; border-radius: 3px;

    display: flex;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    font-size: 14px;
    flex-direction: column;
    box-shadow: 0 1px 1px rgba(27,31,35,0.1);
}


.sumarytitle{border-bottom:1px solid #f1f1f1;padding: 16px;font-weight: 600;color: #0366d6}
.sumarycontent {padding:30px 16px;min-height: 189px;}
.sumarycontent ul{list-style: none;padding:0px;}
.sumarycontent ul li{margin-bottom: 4px !important;}




@media (min-width: 1200px) {
  .container {
    width: 1040px;
  }
}




  /*----------------------------------*/
 /*     INDEX     PORTFOLIO          */
/*					                */



.index-portfolio {z-index: 10001; position: relative;}


.cell-container{position:relative;width: 33%;display:inline-block;padding: 0px;margin:0px;}



.cell-container .image {
transition: transform .2s; transform: scale(0.8);
  width: 100%;
  height: auto;
}

.cell-container .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #404040;
}

.cell-container:hover .overlay {  opacity: 1; }
.cell-container:hover .image { transform: scale(1);}

.cell-container .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}



  /*-------------------------*/
 /*     PORTFOLIO ITEMS     */
/*					       */



.portfolio-bread {background-color: #2C3137;}
.portfolio-bread .container{padding: 0px 0px; text-align: left;}
.portfolio-bread .breadcrumb{background-color: transparent;margin-bottom: 0px}


.portfolio-head {background-color: #fff;}
.portfolio-head .container{padding: 0px 0px; text-align: center;}
.portfolio-head .container img{  width: 100%; max-width: 800px;



    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



.portfolio-high { box-shadow: 0 10px 50px rgba(27,31,35,0.07) !important;padding: 20px;    background-color: #fff;
    border: 1px solid #d1d5da;
    border-radius: 4px; /*border-top: 4px solid  #0366d6 !important;*/ margin-top: 50px}

.portfolio-high h5{font-size: 14px;font-weight: 600;}

.portfolio-high .details{list-style: none;    padding-left: 5px; border-bottom: 1px solid #f1f1f1;padding-bottom: 10px}
.portfolio-high .details li{margin-bottom: 7px;display: inline-block;}
.portfolio-high .details span{background-color: #def; color: #0366d6;padding: 2px 4px; border-radius: 3px;font-size: 12px !important;    padding: 0.3em 0.9em;}

.portfolio-high .tecs{list-style: none;    padding-left: 5px; border-bottom: 1px solid #f1f1f1;padding-bottom: 10px;}
.portfolio-high .tecs li{display: inline-block;margin-bottom: 7px}
.portfolio-high .tecs span {background-color: #f1f1f1; color: #0366d6; border-radius: 3px;font-size: 12px !important;    padding: 0.3em 0.9em;}

.portfolio-high .btn {padding: .75em 1.25em;font-size: inherit;border-radius: 6px;}



.portfolio-description {background-color:#fff}
.portfolio-description .container{padding: 40px 0px; text-align: left}
 .portfolio-description h1{font-weight: 300; color: #24292e; font-size: 50px}
  .portfolio-description h5{ font-size: 16px; font-weight: 400;  color: #586069!important;}
   .portfolio-description h4{ font-size: 20px; font-weight: 400;  color: #586069!important;-webkit-margin-before: 1.5em;}
.portfolio-description p {font-size: 20px; font-weight: 300; color: #586069; text-align:left;padding-right:50px;margin:auto auto; 
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
   } 

.portfolio-details {background-color:#fafbfc;}
.portfolio-details .container{padding: 40px 0px; text-align: center;}
.portfolio-details img{height: 50px}
.portfolio-details h4{font-size: 22px !important;font-weight: 400;    margin-bottom: 80px !important;}

.portfolio-details h5{font-size: 20px !important;font-weight: 400;    margin-bottom: 16px !important;}
.portfolio-details p{color: #586069;text-align: center;padding: 0 30px;margin-bottom: 50px !important;font-size: 16px !important;border-bottom-color: #eee;}



.portfolio-coments .container{padding: 80px 0px; text-align: center}
.portfolio-coments .coment{max-width: 800px;margin:auto auto;border: 1px solid #e5e5e5;border-radius: 6px;box-shadow: 0 1px 1px rgba(0,0,0,.1);padding: 30px;background-color: #fff}

.portfolio-coments .coment p{color: #586069; font-style: italic;}
.portfolio-coments .coment h5{text-align: right}



.portfolio-callout {background-color:#fafbfc}
.portfolio-callout .container {padding: 80px 0px;}
.portfolio-callout .callout-box {background:#fff;width:100%;height: 100px;box-shadow: 0 10px 50px rgba(27,31,35,0.07) !important;padding: 30px 10px;}
.portfolio-callout .callout-box p{color:#24292e; font-size: 18px;font-weight: 300;text-align: center}
.portfolio-callout .callout-box .btn {padding: .75em 1.25em;font-size: inherit;border-radius: 6px;}






  /*-------------------------*/
 /*     COMUN               */
/*					       */

#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 0px;
    z-index: 9999;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 30px;
    color: #444;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;

    border-radius: 50%;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1);
	

}
#back-to-top:hover {
    background: #e9ebec;
    -webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
#back-to-top.show {
    opacity: 1;
}



.separador1-in {
  height:60px;
  margin-bottom:0em;
  border:0px solid green;
  background: linear-gradient(to top left, #fafbfc calc(50% - 1px), #fff, #fff calc(50% + 1px) )
}



.separador1-out {
  height:60px;
  margin-bottom:0em;
  border:0px solid green;
  background: linear-gradient(to top left, #fff calc(50% - 1px), #fafbfc, #fafbfc calc(50% + 1px) )

}



.separador2-out {
  height:60px;
  margin-bottom:0em;
  border:0px solid green;
  background: linear-gradient(to top right, #fff calc(50% - 1px), #fafbfc, #fafbfc calc(50% + 1px) )

}



  /*					     */
 /*   ANIMACION SQUARE      */
/*					       */




#bg-bubbles{
	position: absolute;
	/*margin-top: 65px;*/
	border: 1px solid red;
	width: 100%;
	height: calc(90vh - 100px);max-height: 800px;
	top:0px;
	z-index: 1;
	}
#bg-bubbles	li{
		position: relative;
		list-style: none;
		display: inline-block;
		width: 40px;
		height: 40px;
		transform: scale(1); 
		background-color: rgba(255,255,255,0.1);
		
		top:-120px;
		-webkit-animation: square 25s infinite;
		animation:         square 25s infinite;
		
		-webkit-transition-timing-function: linear;
		transition-timing-function: linear;transition: all .5s;
}
#bg-bubbles li:hover{
	transform: scale(1.5); 
	border-radius: 45px;
	opacity:.1;
	-webkit-transition: opacity .4s ease-in-out, all .3s,transform .2s;
    -moz-transition: opacity .4s ease-in-out, all .3s,transform .2s;
    -o-transition: opacity .4s ease-in-out, all .3s,transform .2s;
    transition: opacity .4s ease-in-out, all .3s,transform .2s;
    

     -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;


}
#bg-bubbles	li:nth-child(1){
			left: 10%;
			border:1px solid red;

		}
#bg-bubbles	li:nth-child(1):hover{
			padding: 10px

		}
	
#bg-bubbles	li:nth-child(2){
			left: 20%;
			
			width: 80px;
			height: 80px;
			
			animation-delay: 2s;
			animation-duration: 17s;
		}
		
#bg-bubbles	li:nth-child(3){
			left: 25%;
			animation-delay: 4s;
		}
		
#bg-bubbles	li:nth-child(4){
			left: 40%;
			width: 60px;
			height: 60px;
			
			animation-duration: 22s;
			
			background-color: fade(white, 25%);
		}
		
#bg-bubbles	li:nth-child(5){
			left: 70%;
		}
		
#bg-bubbles	li:nth-child(6){
			left: 50%;
			width: 120px;
			height: 120px;
			
			animation-delay: 3s;
			background-color: fade(white, 20%);
		}
		
#bg-bubbles	li:nth-child(7){
			left: 32%;
			width: 160px;
			height: 160px;
			
			animation-delay: 7s;
		}
		
#bg-bubbles	li:nth-child(8){
			left: 10%;
			width: 20px;
			height: 20px;
			
			animation-delay: 15s;
			animation-duration: 40s;
		}
		
#bg-bubbles	li:nth-child(9){
			left: 25%;
			width: 10px;
			height: 10px;
			
			animation-delay: 2s;
			animation-duration: 40s;
			background-color: fade(white, 30%);
		}
		
#bg-bubbles	li:nth-child(10){
			left: 5%;
			width: 160px;
			height: 160px;
			
			animation-delay: 11s;
		}




@-webkit-keyframes square {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(900px) rotate(1200deg); }
}
@keyframes square {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(900px) rotate(1200deg); }
}