/** All custom style definitions go here **/
/* ---------- Overall Specifications ---------- */

body { line-height: 1.5; font-size: 87.5%; word-wrap: break-word; margin: 0; padding: 0; border: 0; outline: 0; font-family: 'Lato-Regular'; background: transparent; }
a { text-decoration: none; color:#000000; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { margin: 1.0em 0 0.5em; font-weight: inherit; font-family: 'Lato-Black' !important; color:#000000; font-weight: bold;
}
/*h1 { font-size: 1.357em; color: #000; }
h2 { font-size: 1.143em; }*/
p { margin:0; font-size:14pt; text-align:justify; font-family: 'Lato-Regular'; color:#3a3a3a;}
ul {font-size:14pt;}

tr.odd { background-color: #dddddd; }
img { outline: 0; }

main {
    margin-bottom: 1rem;
}

/*** heading underline decoration ***/
.heading_underline {
    border-bottom: 4px solid #002BB2;
    width: fit-content;
}

/*** FOUNDATION ACCORDION COMPONENT STYLING ***/
.accordion-item { border: 0px;}
.accordion-item.is-active {
    display: grid;
}
.accordion-content {
    border : 0px;
}
a.accordion-title {
    display: block;
    cursor: pointer;
    -webkit-transition: border .2s .1s ease;
    transition: border .2s .1s ease;
}
.accordion-title::before {
    content: "";
}
.is-active>.accordion-title::before {
    content: "";
}

.accordion-content p, .accordion-content ul  {
    margin-top: 0;
    /*
    font-size: .7778rem;
    line-height: 1.31;*/
}
.accordion-content a {
   color : var(--header-links-fontcolor2);
}
:last-child:not(.is-active)>.accordion-title {
    border: 0px;
}

/*** custom accordion styling ***/
.danger_class1 .accordion-item,
.danger_class2 .accordion-item,
.danger_class3 .accordion-item,
.danger_class4 .accordion-item {
    border : 0px;
}
.danger_class1 .accordion-item {
    border : 3px solid #87e0fd;
    border-radius: 15px;
    padding: 0px;
}
.danger_class2 .accordion-item {
    border : 3px solid #64baaa;
    border-radius: 15px;
    padding: 0px;
}
.danger_class3 .accordion-item {
    border : 3px solid #a5a559; 
    border-radius: 15px;
    padding: 0px;
}
.danger_class4 .accordion-item {
    border : 3px solid #a06e3e;
    border-radius: 15px;
    padding: 0px;
}


.danger_class1 .accordion-title,
.danger_class2 .accordion-title,
.danger_class3 .accordion-title,
.danger_class4 .accordion-title {
    color : #3a3a3a;
    font-size: 1.1rem;
}
.danger_class1 .accordion-title {
    background-color:  #87e0fd;
    border-radius: 12px !important;
}
.danger_class2 .accordion-title {
    background-color: #64baaa;
    border-radius: 12px !important;
}
.danger_class3 .accordion-title {
    border-radius: 12px !important;
    background-color: #a5a559; 
}
.danger_class4 .accordion-title {
    border-radius: 12px !important;
    background-color: #a06e3e;
}


.danger_class1 .accordion-content,
.danger_class2 .accordion-content,
.danger_class3 .accordion-content,
.danger_class4 .accordion-content {
    padding: 0px;
    /*width: 95%;*/
    margin: 10px;
    border-bottom:none !important;
}

.danger_class1 .accordion-content p,
.danger_class2 .accordion-content p,
.danger_class3 .accordion-content p,
.danger_class4 .accordion-content p{
    font-size: 1rem;
}

.accordion_readmore {
    float : right;
    color: blue;
    text-decoration: underline;
    cursor: pointer;    
}    
.accordions_container {
    padding : 0px 0px 0px 3%;
}

/* Sticky nav */
.sticky-nav  {
  width: 100%;
  /* animation magic */
  transition: all 2.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  z-index: 99;
}

.fixed {
	background:#0a0709 !important;
    box-shadow:0 2px 6px rgba(0,0,0,0.2);
    animation:slide-down 0.7s;
	position:fixed;
	top:0px;
	opacity:0.9;
}
.shrink img{
	width:40%;
}
.move{
	display:inline-block;
}
.move .logo-wrap{
	padding-top: 5px !important;
    padding-bottom: 5px !important;
}


#logo_transparent {
    /*
    position: fixed;
    top:8.5%;
    left:0px;
    z-index: 100;*/
    visibility: hidden;
}
.visible {
    visibility: visible !important;
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 0.9;
        transform: translateY(0);
    }
}
/* Off canvas */
/*
.off-canvas{
	padding-top:70px;
	background:#003366 !important;
}
.off-canvas ul:not(.contextual-links){
    margin: 0;
    padding: 0;
    list-style: none;
	display:block !important;
}
.off-canvas ul:not(.contextual-links) li{
    width: 100%;
    padding: 0;
}
.off-canvas ul:not(.contextual-links) li a{
    font-size: 1.5rem;
    padding: 10px;
    text-align: center;
    transition: all ease-in-out .2s;
    color: #cccccc;
}
.off-canvas ul:not(.contextual-links) li a:hover{
    color: #3e57a7;
}*/
.stick{
    position: fixed !important;
    margin-top: -159px;
    z-index: 500;
    border-bottom: 1px solid #3e57a7;
    background: #fff;
    width: 100%;
    justify-content: center;
    align-items: center;
}

@media all and (max-width:1024px){
	.stick{
		display: none;
	}
	.stick a[data-toggle="offCanvas"]{
		top: 25px;
	}
}
/*----------------*/
.row{
	max-width:100%;
}
.fullWidth {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: 100%;
   padding-left:0;
   padding-right:0;
}
/* Regions */
.navigation-wrapper,
.content-wrapper,
.banner-wrapper,
.header-wrapper,
.highlite-wrapper,
.highlite-top-wrapper,
.highlite-bottom-wrapper,
.testimonial-wrapper,
.page-wrapper,
.service-wrapper,
.-wrapper,
.footer-wrapper {
	float:left;
	width: 100%;
	clear: both;
}

.navigation,
.content,
.banner,
.header,
.highlite,
.highlite-top,
.highlite-bottom,
.testimonial,
.page,
.service,
.promote,
.footer {
	max-width:100%;
	margin: 0 auto;
}
/* Header */
.header-wrapper{
	width:100%;
}
.header{
	max-width:1650px;
	margin:0 auto;
}
/* Navigation */
.navigation-wrapper{
	width:100%;
	background:#7f7f7f;
}
.navigation{
	max-width:1650px;
	margin:0 auto;
}
.navigation ul li a{
	text-transform: uppercase;
	color: #ffffff;
	font-family:'Lato-Regular';
	font-weight: bold;
}
.navigation ul li a:hover{
	background:#262626;
    -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
	text-decoration:none;
}
/* Banner */
div#banner {
    position: relative;
}

div#block-sitebranding {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    color: #BA1019;
    font-size: 1.5rem;
    font-weight: bold;
    font-style: italic;
    width: 75vw;
    background-image: linear-gradient(to right, #fff, transparent);
    padding-left: 3rem;
}
@media screen and (max-width: 1024px) {
    div#block-sitebranding {
        font-size: 2vw;
    }
}
@media screen and (max-width: 640px) {
    div#block-sitebranding {
        font-size: 3.5vw;
        padding-left: 5px;        
    }
}

.fp-banner-wrapper{
	position:relative;
}
.fp-banner-text{
	position:absolute;
	top:10vw;
	left:10%;
}
.fp-banner-title h2{
	color: #ffffff;
    font-size: 3vw;
    margin: 0;
}
/* Highlite Top */
.highlite-top{
	max-width:1140px;
	margin: 0 auto;
}
.fp-th-wrapper{
	padding-top:50px;
	padding-bottom:50px;
	width:100%;
	padding-left:10px;
	padding-right:10px;
}
.fp-th{
    max-width:1150px;
	margin:0 auto;
}
.fp-th-title h1{
	margin-top: 0!important;
	margin-bottom: 0!important;
}
.t1 h1{
	color:#aab4bd !important;
	line-height: 1;
}
.t2 h1{
	color:#495259 !important;
	line-height: 1;
	padding-left:20px;

}
.fp-th-image{
	text-align:center;
}
.fp-th-content{
	padding:20px;
}
.fp-th-content p{
	line-height:1.5;
}
.owl-item p{
	padding-left:10px;
	padding-right:10px;
}
/* Highlite */
.fp-highlite-wrapper{
	padding-top:50px;
	padding-bottom:50px;
}
.no-pad{
	padding:0 !important;
}

/*blocker - center elements vertically */
.fp-highlte-image {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
}
.fp-highlte-image img{
	width:100%;
	height:auto;
}
.fp-highlte-image h2 {
    /*position: absolute;*/ 
    text-align: center;
    color: #262626;
    filter: drop-shadow(2px 4px 16px #444444);
    padding: 0rem 4rem 4rem 4rem;
    font-size: 2.5rem;
    line-height: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fp-highlte-image h2 img {
    filter: none; 
}

/*move buttons*/
.fp-higlite-button-1,.fp-higlite-button-2 { 
    position: absolute;
    top:60%;
}
/* Page content */
.page-content{
    
	/*
    max-width:1140px;
	margin:0 auto;*/

    max-width: 85vw;
    margin: 0px auto;
}
/* Highlite bottom */
.highlite-bottom-wrapper{
	width:100%;
}
.highlite-bottom{
	max-width:1140px;
	margin:0 auto;
}
.fp-th-body h3{
	margin:0;
	color:#aab4bd !important;
}
.fp-th-body h2{
	margin:0;
	color:#495259 !important;
}
.fp-th-body ul li{
	margin: 0;
    font-size: 14pt;
    text-align: left;
    font-family: 'Lato-Regular';
    color: #3a3a3a;
}
/* Testimonials */
.testimonial-wrapper{
	background:#4b4b4b;
}
.testimonial{
	max-width:1140px;
	margin:0 auto;
}
.testimonial h2{
	text-align:center;
	color:#ffffff;
	padding-bottom:30px;
}
.testimonial .content{
	text-align:center;
	max-width:800px;
	margin:0 auto;
	padding-bottom:30px;	
}
.testimonial .content p{
	color:#ffffff;
}
.owl-item a{
	color:#ffffff;
	padding-bottom:30px;
	font-style:italic;
	font-size:14pt;
}
.owl-item .views-field-title{
	padding-top:20px;
}
/* Buttons */
.igd-button{
	padding-top: 40px;
    text-align: center;
	color: #ffffff;
	border: 2px solid #ffffff;
	border-radius:5px;
	padding: 10px 20px;
	font-size: large;
    font-weight: 700;
    -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
	font-style:normal !important;
}
.igd-button:hover{
	background: #ffffff;
	color: #4b4b4b !important;
	text-decoration: none;	
}
.igd-light-button{
	padding-top: 40px;
    text-align: center;
	color: #ffffff;
	border: 2px solid #ffffff;
	border-radius:5px;
	padding: 10px 20px;
	font-size: large;
    font-weight: 700;
    -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
	font-style:normal !important;
}
.igd-light-button:hover{
    background: #ffffff;
    border: 2px solid #262626;
    color: #919191 !important;
    text-decoration: none;
}
.igd-dark-button{
	padding-top: 40px;
    text-align: center;
	color: #ffffff;
	background:#262626;
	border: 2px solid #ffffff;
	border-radius:5px;
	padding: 5px 10px;
	font-size: large;
    font-weight: 700;
    -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
	font-style:normal !important;
}
.igd-dark-button:hover{
	background: #ffffff;
	border: 2px solid #262626;
	color: #919191 !important;
	text-decoration: none;	
}
.black-button{
	padding-top: 40px;
    text-align: left;
    margin-left: 20px;
	color: #ffffff;
	border: 2px solid #ffffff;
	background:#000000;
	padding: 10px 20px;
	font-size: large;
    font-weight: 700;
    -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
	font-style:normal !important;
}
.black-button:hover{
	border:2px solid #000000;
	background: #ffffff;
	color: #4b4b4b !important;
	text-decoration: none;	
}
.buttons{
	padding-top: 40px;
    text-align: center;
}
.banner-button{
    margin-top: 12%;
    margin-left: 14%;
    padding : 0px!important;
    /*
	padding-top: 40px;
	padding: 10px 20px;*/
    /*
    text-align: center;
	background:#000000;
	color: #ffffff;
	border: 2px solid #ffffff;
	border-radius:5px;
    font-weight: 700;*/
    /*
    -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
	font-style:normal !important;*/
}
.banner-button:hover{
    /*
	background: #ffffff;
	border: 2px solid #000000;
	color: #4b4b4b !important;
	text-decoration: none;*/	
}
.fp-banner-button{
	padding-top: 3vw;
    text-align: center;
}
.blocker {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
}
.blocker-1{
    background-image: url("/themes/igd/images/blockimage4.png");
}
.blocker-1 h2, .blocker-4 h2 {
    color : white;
}

.blocker-2{
    background-image: url("/themes/igd/images/blockimage2.png");
}
.blocker-3{
    background-image: url("/themes/igd/images/blockimage3.png");
}
.blocker-4{
    background-image: url("/themes/igd/images/blockimage4.png");
}
.checkmarkimg {
    width:75px !important;
    margin-top: 1rem;
}
/* Service */
.service-wrapper{
	background:#919191;
}
.service{
	max-width:1510px;
	margin:0 auto;
	padding-top:30px;
	padding-bottom:30px;
}
.fp-os-title{
	text-align:center;
}
.fp-os-title h2{
	color:#262626;
    font-size: 3rem;
    margin-top: 0px;
}
.fp-services-title h2{
	color:#ffffff;
    margin : 1rem;
    font-size: 2rem;
}
.fp-os-body li{
	font-size:14pt;
	color:#ffffff;
}
.fp-os-body{
	padding: 10px;
    border: 3px solid #ffffff;
    border-radius: 10px;
	min-height:280px;
	/*margin:10px;*/
}

.our-services-container {
    padding : 0px 2rem 0px 2rem;
}
.services-rri,.services-mr {
    margin-top: 1rem;
}

.services-sidebar-links {
    position: fixed;
    top:20%;
}

/* Footer */
.footer-wrapper{
	background:#3e3e3e;
	font-size:14pt;
	/*font-style: italic;*/
	padding-bottom:30px;
}
#copyright{
  font-size: 0.8rem;
  color: #ffffff;
  padding-left: 0;
  text-align: center;
}
#igd{
  font-size: 0.8rem;
  color: #ffffff;
  padding-right: 0;
  text-align: center;
}
#igd a{
  font-size: 0.8rem;
  color: #ffffff;
}
#copyright p, #igd p {
    text-align: center;
    color: #ffffff;
    font-size: 0.8rem;  
}
.email-footer, .email-footer:hover {
    color : white;
}

/*center menu links in footer region*/
ul.clearfix.menu.footer {
    display: flex;
    justify-content: center;
    padding : 1rem 0px 1rem 0px;
}
ul.menu.footer li {
  font-size : 0.95rem;
}
.footer-nav a{
	color:#ffffff;
}
.footer-text p{
	color:#ffffff;
	font-size:10pt;
    text-align: center;
}
.footer-text a{ 
    color : white;
}

.centrisi{
  max-width: 1200px !important;
  margin: 0 auto;
  padding-left: 10px;
  padding-top: 20px;
}
.social-bar-wrapper{
	float:right;
}
/* Responsive */
@media screen and (max-width: 1024px) {
	.fp-th-image{
		padding-top:30px;
	}
}

/*** BANNER AREA ***/

.fp-banner-image img {
  min-width: 100%;
}

#block-igd-local-tasks {
  width: 100%;
  background: #7f7f7f;
  padding: 0.25rem 1rem;
  max-width: 1140px;
  display: block;
  margin: 0 auto;
}

#block-igd-local-tasks .content ul {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;
  list-style-type: none;
  margin-bottom: 0;
}

#block-igd-local-tasks .content ul li a {
  color: #ffffff;
  font-weight: bold;
  font-size: 1.024rem;
}

#primary_menu {
    display: flex;
    justify-content: space-between;
}


#primary_menu_info {
   padding-top: 5px; 
}
#primary_menu div.menu {
  display: block;
}
.header-phone-number-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

#primary_menu ul.menu {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

#primary_menu ul.menu::before,
#primary_menu ul.menu::after {
  display: none;
}

#block-igd-content .fp-th-title.t1 h1,
#block-igd-content .fp-th-title.t2 h1 {
	font-weight: 900;
}

.fp-banner-title h2 {
  font-weight: 900;
  font-size: clamp(1.2rem, 3.6vw, 72px);
  line-height: 1;
  filter: drop-shadow(2px 4px 16px #444444);
}

.fp-banner-title:nth-child(2) h2 {
  margin-left: 2rem;
}

#primary_menu ul li {
    height: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

#primary_menu ul li a {
  font-size: clamp(1rem, 1vw, 1.2rem);
  text-transform: capitalize;
  letter-spacing: 0.03rem;
  padding: 1.4rem;
}

.banner-button {
  border-color: #000000;
  border-radius: 0;
}

/*#primary_menu>div>div#block-header-phone-menu,*/
#primary_menu>div>div#block-header-phone,
#primary_menu>div>nav#block-igd-main-menu {
  display: inline-block;
  vertical-align: middle;
}

/*
#primary_menu>div>div#block-header-phone {
	min-width: 18%;
}*/

/*
#primary_menu>div>nav#block-igd-main-menu {
	width: 78%;
}*/

/*.header-phone-number {
  background: #54be42;
  color: #000000;
  border-color: #000000;
  border: 2px solid #000000;
  border-radius: 30px;
  padding: 0.3rem 0.9rem;
  font-weight: 900;
  font-size: 1.2rem;
}
*/



/*side_menu_services1*/
.side_menu {
    /*width : fit-content;*/
    position: fixed;
    right:5%;
    top:30%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
    background-color: white;
}
.side_menu h3 {
    text-align: center;
    margin: 0px;
    padding :0px;
    font-size: 1.2rem;
}
.side_menu h3.contact-us-heading::before
 {
    display: inline-block;
    content: "";
    border-top: 0.2rem solid black;
    width: 60%;
    margin: 0px 10%;
}



.rounded-button {
    border-color: #000000;
    border: 2px solid #000000;
    border-radius: 30px;
    padding: 0.3rem 0.9rem;
    font-size: 1rem;
    text-align: center;
    margin-top: 0.5rem;
}
.btn-blue{
    transition: all 0.2s ease-in-out;
    color:white;
    background-color: #0538b6;
    text-transform: uppercase;
}
.btn-blue a { color : white;}

.btn-black{
    transition: all 0.2s ease-in-out;
    color:white;
    background-color: black;
    text-transform: uppercase;
}
.btn-black a { color : white;}

.btn-green{
    transition: all 0.2s ease-in-out;
    color:white;
    background-color: #54be42;
    text-transform: uppercase;
}
.btn-green a { color : white;}




.header-phone-number {
  background: #54be42;
  color: #000000;
  border-color: #000000;
  border: 2px solid #000000;
  border-radius: 30px;
  padding: 0.3rem 0.9rem;
  font-weight: 900;
  font-size: 1.2rem;
  /*font-family: Times New Roman;*/
  font-family: 'Tinos', serif;
  font-style: italic;
  font-size: 36px;
  font-weight: bold;
  padding: 0.01rem 2rem;
  vertical-align: middle;
  transition: all 0.2s ease-in-out;
}

.header-phone-number:hover,
.header-phone-number:focus {
  text-decoration: none;
  color: #0538b6;
  background: #ffffff;
  border-color: #54be42;
}
/*
#navigation>.row>.columns>.div.show-for-large #block-header-phone-menu>.content>div {
	margin-top: -0.4rem;
}*/

.social-icons-header {
	text-align: right;
}

.social-icon-header {
  text-align: center;
  background: #7f7f7f;
  border-radius: 1000px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  color: #ffffff;
  font-size: 20px;
  display: inline-block;
  transition: all 0.2s ease-in-out;
  margin-right: 6px;
}

/*** SOCIAL ICONS AT TOP RIGHT HEADER ***/

/*testimonials and contact us area to be aligned to right*/
.header-right {
    display: flex;
    justify-content: end;
}

.social-icon-header:hover,
.social-icon-header:focus {
	background: #003fc3;
  
}

.social-icon-header:last-child {
  margin-right: 0;
}

.top-right-header-links-wrapper,
.social-icons-header-wrapper {
	display: inline-block;
	vertical-align: middle;
}

#block-social-icons-top>.content>div {
	text-align: right;
}

.top-right-header-link {
  color: #7f7f7f;
  font-size: clamp(1rem, 1vw, 1.2rem);
  letter-spacing: 0.03rem;
  font-weight: 900;
  margin-right: 3rem;
  transition: all 0.2s ease-in-out;
}

.top-right-header-link:hover,
.top-right-header-link:focus {
	text-decoration: none;
  color: #003fc3;
}

/*#block-social-icons-top*/
#block-socialiconstop{
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

.social-icon a,.social-icon a:hover {
    color : white;
}


/*
@media only screen and (min-width: 95em) {
	#primary_menu ul.menu {
		padding-left: 5rem;
	}
	#primary_menu ul.menu li:last-child a {
	  margin-right: -3.1rem;
	}
}*/

/*** WEBFORM STYLES ***/
.webform_custom_item {
    margin-top : 1rem;
    font-weight: bold;
}
.webform_custom_item > :nth-child(1) {
 font-weight: bold;
 font-size : 1rem;
}

#block-webformcontactus {
    margin-top: 3rem;
}
.contactus_webform {
    margin-top: 3rem;
}

/*** TESTIMONIAL ***/
.testimonial-quote-container {
    display: flex;
}
.testimonial-quote-container p {
    text-align: center;
    margin-top: 0.5rem;
}
.testimonial-left-quote,
.testimonial-right-quote {
    font-size: 1rem;
    color : #a5a5a5;
}
.testimonial-left-quote.homepage,
.testimonial-right-quote.homepage {
    font-size: 3rem;
    padding:5px;
    color : #a5a5a5;
}
.testimonial-right-quote.homepage {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: -1rem;
}
.testimonial-right-quote {
    display: flex !important;
    flex-direction: column-reverse;
}
.testimonial {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.testimonial-title {
    margin-top: 10px;
    text-align: center; 
    display: block;
 }
/*
.testimonial-quote p,
.testimonial-title {
    text-align: center;
    display: block;
}
.testimonial-title {
   margin-top: 10px; 
}*/

/** OUR Works page **/
.ourworks ul {
    list-style-type: none;
    display: flex;
    flex-wrap : wrap;
    margin-left: 0px;
    /*justify-content: space-evenly;*/
}
.ourworks ul li {
    padding:2px;
    flex-basis: 125px;
}





@import url("https://fonts.googleapis.com/css?family=Roboto");
@-webkit-keyframes come-in {
  0% {
    -webkit-transform: translatey(100px);
            transform: translatey(100px);
    opacity: 0;
  }
  30% {
    -webkit-transform: translateX(-50px) scale(0.4);
            transform: translateX(-50px) scale(0.4);
  }
  70% {
    -webkit-transform: translateX(0px) scale(1.2);
            transform: translateX(0px) scale(1.2);
  }
  100% {
    -webkit-transform: translatey(0px) scale(1);
            transform: translatey(0px) scale(1);
    opacity: 1;
  }
}
@keyframes come-in {
  0% {
    -webkit-transform: translatey(100px);
            transform: translatey(100px);
    opacity: 0;
  }
  30% {
    -webkit-transform: translateX(-50px) scale(0.4);
            transform: translateX(-50px) scale(0.4);
  }
  70% {
    -webkit-transform: translateX(0px) scale(1.2);
            transform: translateX(0px) scale(1.2);
  }
  100% {
    -webkit-transform: translatey(0px) scale(1);
            transform: translatey(0px) scale(1);
    opacity: 1;
  }
}
* {
  margin: 0;
  padding: 0;
}



/*** FAB button for SERVICES page ***/
/*
.floating-container {
  position: fixed;
  width: 100px;
  height: 100px;
  bottom: 0;
  right: 0;
  margin: 35px 25px;
}
.floating-container:hover {
  height: 300px;
}
.floating-container:hover .floating-button {
  box-shadow: 0 10px 25px rgba(44, 179, 240, 0.6);
  -webkit-transform: translatey(5px);
          transform: translatey(5px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.floating-container:hover .element-container .float-element:nth-child(1) {
  -webkit-animation: come-in 0.4s forwards 0.2s;
          animation: come-in 0.4s forwards 0.2s;
}
.floating-container:hover .element-container .float-element:nth-child(2) {
  -webkit-animation: come-in 0.4s forwards 0.4s;
          animation: come-in 0.4s forwards 0.4s;
}
.floating-container:hover .element-container .float-element:nth-child(3) {
  -webkit-animation: come-in 0.4s forwards 0.6s;
          animation: come-in 0.4s forwards 0.6s;
}
.floating-container .floating-button {
  position: absolute;
  width: 65px;
  height: 65px;
  background: #2cb3f0;
  bottom: 0;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: auto;
  color: white;
  line-height: 65px;
  text-align: center;
  font-size: 23px;
  z-index: 100;
  box-shadow: 0 10px 25px -5px rgba(44, 179, 240, 0.6);
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.floating-container .float-element {
  position: relative;
  display: block;
  border-radius: 50%;
  /*width: 50px;*/
  /*
  height: 50px;
  margin: 15px auto;
  color: white;
  font-weight: 500;
  text-align: center;
  line-height: 50px;
  z-index: 0;
  opacity: 0;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
}
.floating-container .float-element .material-icons {
  vertical-align: middle;
  font-size: 16px;
}
.floating-container .float-element:nth-child(1) {
  background: #42A5F5;
  box-shadow: 0 20px 20px -10px rgba(66, 165, 245, 0.5);
}
.floating-container .float-element:nth-child(2) {
  background: #4CAF50;
  box-shadow: 0 20px 20px -10px rgba(76, 175, 80, 0.5);
}
.floating-container .float-element:nth-child(3) {
  background: #FF9800;
  box-shadow: 0 20px 20px -10px rgba(255, 152, 0, 0.5);
}

.floating-container > .element-container {
    position: absolute;
    bottom: 88px;
}*/





/*
#test {
    border : 1px solid red;
    width : 200px;
    height: 400px;
    position: fixed;
    right:0px;
    top:20%;
}*/