/* Global Styles */
* {
  box-sizing: border-box;
}
.uc_content-wrapper {
  width: 80%;
  margin: 0 auto;
  display: table;
  min-height: 800px;
}
.uc_content {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
}
/* End Global Styles */

/* Start Nav Styles */
.uc_navbar .uc_nav-menu{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-flow: column;
}
.uc_navbar .uc_nav-menu li {
  position: relative;
  min-width: 200px;
  text-align: right;
}
.uc_navbar .uc_nav-menu li .uc_dot {
  display: block;
  color: #fff;
  padding: 5px 0;
}
.uc_navbar .uc_nav-menu li .uc_dot::before,
.uc_navbar .uc_nav-menu li .uc_dot::after {
  display: block;
  position: absolute;
  content: '';
  border-radius: 50%;  
  top: 50%;  
  -webkit-transition: all .3s ease;  
  transition: all .3s ease;
}
.uc_navbar .uc_nav-menu li .uc_dot::before {
  width: 5px;
  height: 5px;
  right: 0;
  border: 2px solid #181818;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.uc_navbar .uc_nav-menu li .uc_dot::after {
  width: 15px;
  height: 15px;
  border: 2px solid #f44336;
  right: -5px;
  -webkit-transform: translateY(-50%) scale(0);
          transform: translateY(-50%) scale(0);
}
.uc_navbar .uc_nav-menu li .uc_dot.uc_active::before,
.uc_navbar .uc_nav-menu li:hover .uc_dot::before {
  background: #f44336;
  border-color: #f44336;
}
.uc_navbar .uc_nav-menu li .uc_dot.uc_active::after,
.uc_navbar .uc_nav-menu li:hover .uc_dot::after {
  -webkit-transform: translateY(-50%) scale(1);
          transform: translateY(-50%) scale(1);  
}
.uc_navbar .uc_nav-menu li .uc_dot span {
  display: inline-block;
  opacity: 0;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: capitalize;
  background-color: #f44336;
  padding: 10px 20px;
  border-radius: 3px;
  margin-right: 30px;
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.uc_navbar .uc_nav-menu li .uc_dot span::before {
  display: block;
  position: absolute;
  content: '';
  border-left: 7px solid #f44336;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  top: 50%;
  -webkit-transform: translate(7px, -50%);
          transform: translate(7px, -50%);
  right: 0;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.uc_navbar .uc_nav-menu li .uc_dot.uc_active span,
.uc_navbar .uc_nav-menu li:hover .uc_dot span {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
  opacity: 1;
}
/* End Nav Styles */

/* Start Home Styles */
#home {
  background-color: #f6f6f6;
}
#home button {
  border: 2px solid #ffc107;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  padding: 12px 25px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  margin-top: 20px;
}
#home button:hover {
  background-color: #ffc107;
  color: #fff;
}
/* End Home Styles */

/* Start About Styles */
#about .container {
  padding: 100px 0;
}
#about p {
  width: 60%;
  margin: 10px auto;
}
#about img {
  margin-top: 40px;
}
/* End About Styles */

/* Start Services Styles */
#services {
  background-color: #eee;
}
#services .services {
  margin: 40px auto;
}
#services .services .service {
  width: 50%;
  padding: 1%;
}

#services .text-right {
  float: right;
}
#services .text-left {
  float: left;
}
/* End Services Styles */

/* Start Testimonials Styles */
#test,
#test .content-wrapper {
  min-height: 400px;
}
/* End Testimonials Styles */

/* Start Contact Styles */
#contact {
  min-height: 600px;
  background-color: #222;
  color: #fff;
}
#contact .content-wrapper {
  min-height: 600px;
}
#contact p {
  color: #eee
}
#contact .mail {
  font-size: 30px;
  margin-top: 40px;
}
/* End Contact Styles */

/* Start Footer Styles */
footer {
  background-color: #000;
  padding: 40px 0;
}
footer p {
  margin: 0;
  color: #fff;
  font-size: 20px;
  letter-spacing: .5px;
  font-weight: 700;
}
/* End Footer Styles */



/**
*
*  I used Normalize.css to reset elements.
*  I used Autoprifixer to make sure that I'm using the necessary vendor prefixes.
*
**/