/* STYLE CSS */

/* Typography 
@import url(http://fonts.googleapis.com/css?family=Merriweather:400italic,400,700,700italic); */
@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);
/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);*/
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
/*background-image: url("img/house.gif");*/

body{
    background-color: #1A1A1A;
    overflow-x: hidden;
}


/*FONTS & PARAGRAPHS*/
h1{
    font-size: 12pt;
    font-weight: 700;
    font-family: 'Inconsolata', serif;
    letter-spacing: 2px;
}

h1.color{
    font-size: 12pt;
    font-weight: 700;
    font-family: 'Inconsolata', serif;
    letter-spacing: 2px;
    color: #279DA1;
}

p{
  font-family: 'Lato', sans-serif;
  font-size: 11pt;
  font-weight: 300;
  letter-spacing: 1px;
}


p.neg{
  font-family: 'Lato', sans-serif;
  font-size: 11pt;
  font-weight: 300;
  color: #fff;
  letter-spacing: 1px;

}

small.neg{
   font-family: 'Lato', sans-serif;
  font-size: 9pt;
  font-weight: 300;
  color: #fff;
  letter-spacing: 1px;

}


a.neg{
  text-decoration: none;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 11pt;
  font-weight: 300;
  letter-spacing: 1px;
  opacity: 0.6;
}

a.neg:hover{
  color: #279DA1;
  opacity: 1;
}

a.neg:visited{
  text-indent: none;
  text-decoration: none;
}


.fa {
    color: #fff ;
}

.fa:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);

    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      color: #279DA1;

      
  }

/*CREDITS*/
a.small{
  font-family: 'Lato', sans-serif;
  font-size: 9pt;
  font-weight: 300;
  color: #fff;
  letter-spacing: 1px;

}


a.small:hover{
  color: #279DA1;
  opacity: 1;
}

a.small:visited{
  text-indent: none;
  text-decoration: none;
}

.credit{
  opacity:0.5;
}

/*HOMEPAGE*/


#home{
background: url("../img/home/house.gif") no-repeat top center;
height: 1400px;

}


/*#slider1_container {display: none; position: relative; margin: 0 auto;
        top: 0px; left: 0px; width: 1300px; height: 800px; overflow: hidden;}*/

/*#logo-square{

    width: 120px;
    height: 120px;
    background-color: #279DA1;
    position: center;
    text-align: center;
    margin-top: 280px;

}*/



/* ------------ NEXT ›››››››››››››› */
#down-container{
  height: 40px;
  margin-top: 0px;
}

.down {
    position: absolute;
    /*left: 52.2%;*/
    margin-left: 0 auto;
    top: -100px;
}





#over{
    position:absolute;
    top: 80px;
    left:80px;
    z-index:3;
}

#over0{
    position:absolute;
    top: 80px;
    left:80px;
    z-index:2;
    margin-bottom: 10px;
}

/* WEBSITE SECTION /////////////////////////////////////////////////////////////////////*/


/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:0;
  padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
  padding-right:0;
  padding-left:0;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
  padding-left:0;
  padding-right:0;
}

.homepage-box{
    padding: 40px 10px 10px 10px;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
     -ms-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
}

#rect{
    background-color: black;
    opacity: 0.5;
    border: 2px solid white;
    height: 494px;
   

}


/*//////////////////////////////////////////*/

#contacts {
    
    height: 99px;
    border: 2px solid white;
    color: #fff;
    opacity: 1;
    

}


/*HOVER*/
#contacts:hover{
    background-color: #fff;
    color: black;
    opacity: 0.85;

    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
}


/*//////////////////////////////////////////*/

#about {
    
    height: 217px;
    border: 2px solid white;
    color: #fff;

}

/*HOVER*/
#about:hover{
    background-color: #fff;
    color: black;
    opacity: 0.85;

    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
}


/*//////////////////////////////////////////*/

#logo-square{

    
    height: 99px;
    background-color: #279DA1;
    padding-left: 5px;
    border: 2px solid white;

}

#img-logo-square{

    height: 90px;
    margin-left: -5px;

    
}

#logo-square:hover{
 /* -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1); */

    opacity: 0.5;

    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
     -ms-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;

}

/*//////////////////////////////////////////*/

#projects{

    
    height: 316px;
    border: 2px solid white;
    color: #fff;

}

/*HOVER*/
#projects:hover{
    background-color: #fff;
    color: black;
    opacity: 0.85;

    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
}


/*//////////////////////////////////////////*/

#elementsLAB {
    
    height: 178px;
    border: 2px solid white;
    color: #fff;

}

/*HOVER*/
#elementsLAB:hover{
    background-color: #fff;
    color: black;
    opacity: 0.85;

    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
}


/*//////////////////////////////////////////*/

#news {
    
    height: 178px;
    border: 2px solid white;
    color: #fff;

}

/*HOVER*/
#news:hover{
    background-color: #fff;
    color: black;
    opacity: 0.85;

    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
}

/*::::::::::::::::::::::::::::::  FOOTER: HOME CONTACTS  ::::::::::::::::::::::::::::::::::*/


#footer{
  padding-top: 10px;
}

.up {
    position: absolute;
    /*left: 48%;*/
   height: 100px;
    margin-left: 0 auto;
}



#row-up{
  padding-top: 40px;
  height: 100px;
}

#home-contacts{
  padding-top: 260px;
  padding-bottom: 50px;
  height: 500px;

}

#logo-neg{
  width: 50%;
}

/*=========================== TEMPORARY =========================== */

.temporary{
  margin-top: 100px;
}




/*::::::::::::::::::::::::::::@MEDIASCREEN::::::::::::::::::::::::::::::::::::*/


/*==============TABLET LANDSCAPE==============*/


/* Landscape */
@media screen and (min-width: 769px) and (max-width: 1025px) { 

 body{
    overflow-x: hidden;
  }

#rect{

    height: 404px;
   

}

#about {
    
    height: 167px;

}

#contacts {
    
    height: 89px;
    

}


#logo-square{

    
    height: 89px;

}

#img-logo-square{

    height: 80px;
    margin-left: -5px;

    
}

#projects{

    
    height: 256px;

}


#news {
    
    height: 148px;


}


#elementsLAB {
    
    height: 148px;


}

.down {
    position: absolute;
    /*left: 52.2%;*/
    margin-left: 0 auto;
    top: 20px;
}

.down {
    position: absolute;
    /*left: 52.2%;*/
    margin-left: 0 auto;
    
}



/*.down{
  
  left: 45%;
  position: absolute;
}

.up {
    left: 50%;

}*/

#row-up{
  height: 150px;
  margin-top: 50px;
  padding-top: 90px;
}

.temporary{
  margin-top: 0px;
}


#home-contacts{

}


}


/* PORTRAIT */
@media screen and (max-width: 768px){ 

 body{
    overflow-x: hidden;
  }

    #over{
    top: 300px;
    left:50px;
  }

  #over0{
    top: 300px;
    left:50px;

  }

#rect{

    height: 404px;
   

}

#about {
    
    height: 167px;

}

#contacts {
    
    height: 89px;
    

}


#logo-square{

    
    height: 89px;

}

#img-logo-square{

    height: 80px;
    margin-left: -5px;

    
}

#projects{

    
    height: 256px;

}


#news {
    
    height: 148px;


}


#elementsLAB {
    
    height: 148px;


}


#footer{
  padding-top: 10px;
  margin-top: 370px;
}


.up{display:none;}
.down{display:none;}

 #logo-neg{
  margin-top: 20px;
  width: 70%;

}

#row-up{
  height: 100px;
}

.temporary{
  height: 50px;
  margin-top: 20px;
  padding-top: 0px;
}


div#home-contacts{
  padding-bottom: 50px;
  padding-left: 30px;
  height: 300px;
  padding-top: 20px;
}


}



/*============== SMARTPHONE VERTICAL ==============*/

@media screen and (max-width: 500px){

  body{
    overflow-x: hidden;
  }

  #over{
    top: 120px;
    left:50px;
  }

  #over0{
    top: 120px;
    left:50px;

  }

.homepage-box{
    padding: 5px 5px 5px 5px;
  }

#rect{
  width: 210px;
  height: 480px;
}  
  #contacts{
    height: 70px;
  }
  #projects{
    height: 100px;
  }

  #news{
    height: 70px;

  }

   #elementsLAB{
    height: 90px;
  
  }

   #about{
    height: 90px;
  
  }

  #logo-square{
  
    height: 60px;

}

#img-logo-square{

    height: 60px;
    
}


 #logo-neg{
  margin-top: 40px;
 
}

/*==============TEMPORARY==============*/
.temporary{
  margin-top: 20px;
  padding-top: 20px;
}


div#home-contacts{
  padding-bottom: 50px;
  padding-left: 30px;
  height: 500px;
  padding-top: 20px;
}



.up{display:none;}
.down{display:none;}


}






/*============== SMARTPHONE HORIZONTAL ==============*/

@media screen and (max-width: 767px){
  
 body{
    overflow-x: hidden;
  }

  #over{
    top: 120px;
    left:50px;
  }

  #over0{
    top: 120px;
    left:50px;

  }

.homepage-box{
    padding: 5px 5px 5px 5px;
  }

#rect{
  width: 210px;
  height: 480px;
}  
  #contacts{
    height: 70px;
  }
  #projects{
    height: 100px;
  }

  #news{
    height: 70px;

  }

   #elementsLAB{
    height: 90px;
  
  }

   #about{
    height: 90px;
  
  }

  #logo-square{
  
    height: 60px;

}

#img-logo-square{

    height: 60px;
    
}


 #logo-neg{
  margin-top: 40px;
   width: 30%;


 
}

/*==============TEMPORARY==============*/
.temporary{
  margin-top: 20px;
  padding-top: 20px;
}


div#home-contacts{
  padding-bottom: 30px;
  padding-left: 30px;
  height: 500px;
  padding-top: 20px;
}



.up{display:none;}
.down{display:none;}


}



@media screen and (max-width: 1000px) { 
.up{display:none;}
.down{display:none;}
}



@media screen and (max-width: 1350px){ 
  .down{display:none;}
}

@media screen and (max-width: 1190px){ 
  .jssorb21{display:none;}
}