/*These styles contain basic styles for fomatting along with our animation css*/
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background: #fff;
  line-height: 110%;
  font-size: 20px!important;
}

p {  font-size: 16px!important;}
.dropdown:hover>.dropdown-menu {
  display: block;
}


.availability-chart ul{background:#8c8c8c;padding-left:0;list-style:none;color:#fff;overflow:hidden;font-weight:500;margin-bottom:0}
.availability-chart ul li{float:left;text-align:center;width:8.3333333%;border-left:1px solid #fff;padding:12px 0}
.availability-chart ul li:first-child{border-left:0}
.availability-chart ul.months{background:#b3d1ff}
.availability-chart ul.months li{text-indent:-9999px!important;}
.availability-chart ul.months li.active{background-color:#0052cc}

.block { background-color:#0052cc; padding: 10px 20px; margin-right: 20px}
.block-limited { background:#b3d1ff;padding: 10px 20px}
.key {font-weight: bold; padding-right: 10px;}

*, *:after, *:before { box-sizing: border-box; -moz-box-sizing: border-box;}

nav * {margin:0;padding:0;border:0 none;position: relative; outline: none;}
a {color: #f88b0d; font-weight: bold;}
a.link {color: navy;}
a.menu-link {color: #666!important; font-weight: bold!important; font-family: 'Roboto', sans-serif; font-size: 16px!important;text-transform: none!important; }
.menu-link {}

a.nav-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 5px;
  left: 0;
  background: #336600;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}
a.nav-link:hover:before, a.nav_link:focus:before { visibility: visible; transform: scaleX(1); }

.btn-ft {background: #666; color: white; padding: 20px;}
.btn-ft:hover {background: #ccc;}
strong,
b {
  font-weight: 600
}
p { font-size: 16px; text-align: justify;}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: left;
  font-weight: 600;
text-transform: initial;
  line-height: 150%;
}

h2 {text-align: left; font-size: 22px;
}

h4:after, h2:after {margin-bottom: 10px; content: ""; display: block; width: 100px; border-bottom: 5px solid #ff9933; }
h5:after {margin-bottom: 10px; content: ""; display: block; width: 100px; border-bottom: 3px solid #36c6e6; }

#photos {
   /* Prevent vertical gaps */
   line-height: 0;
   
   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
  .p-5 {padding: 5px 10px!important;}
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
  .p-5 {padding: 5px 20px!important;}
}

.section-heading {text-align: left; font-size: 30px; font-family: 'Cookie', cursive;}

h6 {text-transform: initial; color: orangered;}
li { font-size: 16px;}
i.fa {
  color: #333;
}
.fa-space {padding-right: 10%;}
.fa-space_01 {padding-right: 5%; font-size: 24px; color: orangered;}
.tech-space {padding: 10px;}
*,
*:before,
*:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/*clearfixes*/

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}


.contained {
  position: relative;
  text-align: center;
/*  height: 350px;*/
}

.ft-contained {
  position: relative;
  text-align: center;
  height: 350px;
}
.centered {
  font-size: 3em;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%); color: white;
font-family: 'Cookie', cursive;
  line-height: 100%;
  white-space: nowrap;
}

.btm-centered {
  color: #fff;
  font-size: 1.8em;
  position: absolute;
  bottom: 0;
  left: 50%; margin: 0;
  transform: translate(-50%, 10%);
  width: 110%!important; padding: 30px 0 ; text-align: center;
}

.left-centered {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; padding: 10px;
  border: 1px solid white;
 outline: 2px solid #fff;
}
.tech-space {max-width: 300px; height: auto; width: 90%;}

.text-muted {text-align: justified!important;}
.content {text-align: justified!important;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}


.services-img {width: 100%; height: auto;}
@media screen and (max-width: 992px) {
.services-img {width: 80%; height: auto;}
.centered {  font-size: 2em; padding-top: 20px; line-spacing: 100%}
}

@media screen and (max-width: 768px) {
.services-img {width: 100%; height: auto;}
.disappear {display: none;}
.centered {  font-size: 1.5em; padding-top: 20px; line-spacing: 100%; }
}

header.masthead{text-align:center;color:#fff;background-image:url(img/css.png);height: 250px;}

.tech {color: white;}

.white {background: #ffffff}
.cyan {background: #47c8e7}
.light-blue {background: #6666cc}
.light-grey {background: #666}
.navy {background: #151c2d}
.mid-blue {background: #00618a}
.wp-blue {background: #20759a}
.orange {background: #f26522}
.light-orange {background: #ffcc33}
.gold {background: #d4af37}
.dark-red {background: #9e0b0f}
.green {background: #197b30}
.purple {background: #500e7e}
.grey {background: #303030}
.black {background: #000000}
.blue {background: #000066}
.purple-02 {background: #9d55b1} 
.front-page {width: 100%; height: auto; text-align: center;}
.img-ft { max-height: 550px; width: 100%; /*border: 5px solid green;*/}
.front-page-th {width: 100%; height: auto; text-align: center; border: 5px solid white;}
.front-page-th img {object-fit: contain; height: auto; width: 100%;}
.op-image {width: 100%;min-height: 420px; object-fit: cover; }
.work-logo {max-width: 250px; width: 100%; height: auto!important;object-fit: fit;}

.main-container {
  background: #fff;
  width: 100%;
  margin: 0px auto;
  position: relative;
  padding: 0;
}
.spaces {padding: 30px; margin: 0px;}
.container {
  position: relative;
  width: 100%;
}

.container:last-of-type {
  padding-top: 0px;
}

ul.recipes {list-style-type: square;}
ul.recipes li {text-align: left; margin-left: -20px;}

ol.recipes-i li {text-align: left; margin-left: -20px;}

footer {background: #ccc}

.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}
/*animation element*/

.animation-element {
  position: relative;
  width: 30%;
  margin: 0% 1.33 2.66% 1.33%;
  float: left;
}
/*3 grid layout*/

.animation-element:nth-of-type(3n-2) {
  width: 30%;
  margin: 0% 1.375% 2.75% 0%;
  clear: left;
}

.animation-element:nth-of-type(3n-1) {
  width: 31.5%;
  margin: 0% 1.375% 2.75% 1.375%;
}

.animation-element:nth-of-type(3n-0) {
  width: 31.5%;
  margin: 0% 0% 2.75% 1.375%;
  clear: right;
}
/*bounce up animation for the subject*/

.bounce-up .subject {
  opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(0px, 200px, 0px);
  -webkit-transform: translate3d(0px, 200px, 0px);
  -o-transform: translate(0px, 200px);
  -ms-transform: translate(0px, 200px);
  transform: translate3d(0px, 200, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bounce-up.in-view .subject {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.service-heading {color: white;}
.subject {
  float: left;
  width: 100%;
  margin: 0% 1.33% 2.66% 1.33%;
  /*box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  border: solid 1px #EAEAEA;*/
}

.subject:hover,
.subject:active {
  /*box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);*/
}

.subject .header {
  margin: 8px 0px;
}

.subject .header .date,
.subject .header .category {
  margin: 0px;
  clear: none;
  width: 50%;
}

.subject .header .date i,
.subject .header .category i {
  margin-right: 5px;
  color: #ccc;
  -moz-transition: all 400ms linear;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}

.subject .header .date {
  float: left;
  text-align: left;
}

.subject .header .category {
  float: right;
  text-align: right;
}
/*subject icon at top*/

.subject .icon {
  position: absolute;
  top: -20px;
  left: 50%;
  left: calc(50% - 20px);
}

.subject .icon i {
  width: 40px;
  height: 40px;
  color: rgb(255, 255, 255);
  font-size: 150%;
  border-radius: 50%;
  text-align: center;
  padding: 7px;
}
/*Category color / icon color*/

.subject .category-color {
  height: 7px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.subject.design .category-color,
.subject.design .icon i {
  background: #c0392b;
}

.subject.development .category-color,
.subject.development .icon i {
  background: #16a085;
}

.subject.photography .category-color,
.subject.photography .icon i {
  background: #2980b9;
}
/*hovering over subject*/

.subject.development:hover .header i {
  color: #16a085;
}

.subject.design:hover .header i {
  color: #c0392b;
}

.subject.photography:hover .header i {
  color: #2980b9;
}

.subject .title {
  margin: 12px 0px;
  border-bottom: dashed 1px #ccc;
  padding-bottom: 10px;
}

.subject .content {
  margin-bottom: 8px;
}

.subject .enrole {
  position: relative;
  color: #333;
  padding: 5px 12px;
  cursor: pointer;
  float: right;
  display: inline-block;
  border: solid 1px #ccc;
  -moz-transition: all 400ms linear;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}

.subject .enrole:hover,
.subject .enrole:active {
  background: #222;
  color: #fff;
}
/*media queries for small devices*/
.logo_size {width: 80%; padding: 0; margin: 0;}
@media screen and (max-width: 678px) {
  .main-container {
    margin: 0px;
  }
  .animation-element,
  .animation-element:nth-of-type(3n-1),
  .animation-element:nth-of-type(3n-2),
  .animation-element:nth-of-type(3n-0) {
    background-color: inherit;
    width: 100%;
    margin: 0px 0px 30px 0px;
  }
  .subject .header .date,
  .subject .header .category {
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
  }
  .logo_size {padding: 0; margin: 0;}
  a.navbar-brand {
    padding:0; margin: 0;width: 60%;
  }
}



.divider-custom {
  margin: 1.25rem 0 1.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.divider-custom .divider-custom-line {
  width: 100%;
  max-width: 10rem;
  height: 0.25rem;
  background-color: #00cc99;
  border-radius: 1rem;
  border-color: #00cc99 !important;
}

.divider-custom .divider-custom-line:first-child {
  margin-right: 1rem;
}

.divider-custom .divider-custom-line:last-child {
  margin-left: 1rem;
}

.divider-custom .divider-custom-icon {
  color: #00cc99 !important;
  font-size: 2rem;
}

.divider-custom.divider-light .divider-custom-line {
  background-color: #fff;
}

.divider-custom.divider-light .divider-custom-icon {
  color: #fff !important;
}

ul.footer-links {list-style: none; text-align: left;font-size: 14px!important;}
footer {width: 100%!important; font-size: 14px!important; }
.copyright {font-size: 12px!important;}
.bg-info {background: #666!important}

.wrapper {
    max-width: 1400px;
    height: 300px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.wrapper-thumbnail {
    max-width: 500px;
    height: 500px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.pdt-tb {min-width: 350px;min-height: 200px;}
/* Image zoom on hover + Overlay colour */
.parent { width: 100%; height: 100%; overflow: hidden; position: relative; float: left; display: inline-block; cursor: pointer; }

.child {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}


.parent:hover .child, .parent:focus .child {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.parent:hover .child:before, .parent:focus .child:before {
    display: block;
}

.parent:hover a, .parent:focus a {
    display: block;
}

.child > a {padding-top: 10px;
    background: #333;
    display: none;
    font-size: 20px;
    color: #ffffff !important;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    width: 200px;
    cursor: pointer;
    text-decoration: none;
}
.child:before {
    content: "";
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(193,66,66,0.1);
}