.row-wrapper-x
{

  margin-left:600px;
  margin-top: -300px;
}

.clearfix:after {
  content: '.';
  line-height: 0;
  height: 0;
  overflow: hidden;
  display: block;
  clear: both;
  width: 100%;
  visibility: hidden;
}


.content {
  max-width: 90%;
  margin: 0 auto;
  padding: 15px;
  overflow: hidden;
  position: relative;
} 

.block {
  float: left;
  width: 50%;
  min-height: 200px;
}

.gutter {
  margin: 15px;
  min-height: 200px;
}

.block:nth-child(3n+1) .gutter-1
{
  background: #a2b9bc; background-image: url("wp-content/uploads/e1.jpg");
  -webkit-background-size: cover;

}

.block:nth-child(3n+2) .gutter-1
{
 background: #a2b9bc; background-image: url("wp-content/uploads/e2.jpg");
 -webkit-background-size: cover;
}

.block:nth-child(3n+3) .gutter-1 
{ 
  background: #a2b9bc; background-image: url("wp-content/uploads/wht.jpg");
  -webkit-background-size: cover;
}

/* .............gutter services*.........bootsatr..................*/



.block:nth-child(3n+1) .gutter-11
{
  background: #a2b9bc; background-image: url("wp-content/uploads/e1.jpg");
  -webkit-background-size: cover;

}

.block:nth-child(3n+2) .gutter-11
{
 background: #a2b9bc; background-image: url("wp-content/uploads/e2.jpg");
 -webkit-background-size: cover;
}

.block:nth-child(3n+3) .gutter-11 
{ 
  background: #a2b9bc; background-image: url("wp-content/uploads/wht.jpg");
  -webkit-background-size: cover;
}




.overlay
{
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}





.gutter-1
{
  margin: 15px;
  min-height: 200px;
  text-align: center;
}

.gutter-inside
{
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;

}





.gutter-1:hover
{
  opacity: 0.9;
}

.gutter-12
{
  text-rendering: non;
  animation-duration: 
  -webkit-transform:translate;
  -white-space: 2px;
  -word-break: normal;
  mix-blend-mode: 12em;
  grid-column: website;

}

.gutter-1:hover .gutter-inside
{
  visibility: visible;
  background-color: black;
  opacity: 1;   
}




.gutter-inside
{
  background-color: black;
  color: white;  
}

 

.block:nth-child(3n+1) .gutter {background: white; }

.block:nth-child(3n+2) .gutter { background: white; }

.block:nth-child(3n+3) .gutter { background: white; }



.full-block {
  width: 100%;
  min-height: 300px;
  background: #e74c3c;
}


.full-block-1 
{
  width: 100%;
  min-height: 200px;

  background: #e74c3c;
}


 


.fly {
  opacity: 0;
  transition: all 600ms ease-in-out;
  transform: translateY(100px) scale(1.05) translate3d(0, 0, 0);
}

.show-block {
  opacity: 1;
  transform: translateY(0) scale(1) translate3d(0, 0, 0);
}

header{ position: fixed; }

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

.block
{
  float: none;
  width: 100%;
  min-height: 200px;
}
}


/*....................hero Image ............................*/
/*....................hero Image ............................*/

body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.full-block, hero-image
{
  background: linear-gradient(rgba(0, 0, 0, 0.5), 
  rgba(0, 0, 0, 0.5)), url("wp-content/uploads/ka.jpg");

  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}


.full-block-1, hero-image
{
  background: linear-gradient(rgba(0, 0, 0, 0.5), 
  rgba(0, 0, 0, 0.5)), url("wp-content/uploads/news-events1.jpg");
  height: 15%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}




.hero-text 
{
  text-align: center;
  position: absolute;
  top: 60%;
  left: 50%;
  color: #F0F8FF;
  transform: translate(-50%, -50%);  
}

@media screen and (max-width: 640px)
{
 .hero-text > h1
 {
  font-size: 24px;
  margin-top: 64px;
 }

}

.hero-text-1 
{
  text-align: center;
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);  
}




.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #5F9EA0;
  text-align: center;
  cursor: pointer;
}

.hero-text button:hover {
  background-color: #555;
  color: white;
}







/*...........................Others.........................*/


.colorskin-16 
{
  background-color: #00008B;
}

.services
{
  
  background-color: #DCDCDC;
  width: 500px;
}

@media screen and (max-width: 600px)
{
  .services
  {
    width: 400px;

    text-align: center;

  }

}






.kk
{
  height: 2px; width: 100%; background-color: red;
}