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

Template Name: Dreamhub - Personal Resume/CV/Portfolio HTML Template 
Author: Theme_Choices
Version: 1.0
Design and Developed by: Theme_Choices

****************************************/
/*================================================
            Table of contents  
==================================================

1. DEMO SECTION
2. PRELOADER
3. BACK TO TOP
4. HEADER SECTION
5. ABOUT SECTION
6. SERVICES SECTION
7. PORTFOLIO SECTION
8. TEAM SECTION
9. TESTIMONIALS SECTION
10. CONTACT SECTION
11. FOOTER SECTION

/*================================================
             1. DEMO SECTION
==================================================*/

.demo-section {
    background: #f4f7f9;
    padding-top: 50px;
    padding-bottom: 70px;
}
.demo-heading h1 {
    font-family: "Signika", sans-serif;
    font-size: 45px;
    font-weight: 800;
    color: #062033;
    text-align: center;
    letter-spacing: 8px;
    margin-bottom: 40px;
}
.demo-img h3 {
    font-family: "Signika", sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #062033;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 25px;
}
.demo-img:hover h3 {
    color: #f30336;
    transition: all 0.4s ease 0s;
}
.demo-img img:hover {
    transition: all .2s ease-in-out;
    border-radius: 2%;
}
/*================================================
             2. PRELOADER
==================================================*/

.preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 9999999;
}
.preloader .spinner {
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
}
.spinner {
    width: 40px;
    height: 40px;
    background-color: #f30336;
    margin: 100px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}
@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}
/*================================================
             3. BACK TO TOP
==================================================*/

.back-to-top {
    position: fixed;
    display: block;
    bottom: 2em;
    right: 1em;
    width: 3em;
    height: 3em;
    background: #f30336;
    line-height: 3em;
    z-index: 9999;
    color: #fff;
    text-align: center;
    border: 1px solid #f30336;
    visibility: hidden;
    font-size: 20px;
}
.back-to-top:hover {
    background: #fff;
    color: #444;
    transition: 1s;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}
.back-to-top--active {
    visibility: visible;
    -webkit-animation: back-to-top .3s ease-in;
    animation: back-to-top .3s ease-in;
    transition: width 2s;
}
/*================================================
             4. HEADER SECTION
==================================================*/


.home-header {
    background: linear-gradient(rgba(20, 20, 20, .5), rgba(20, 20, 20, .5)), url(../images/header-bg.jpg);
    height: 100vh;
	width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}
#particles-js {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.navbar {
    background: none;
    border: medium none;
    border-radius: 0;
    margin-bottom: 0;
    padding-bottom: 33px;
    padding-top: 25px;
    z-index: 10001;
}
.navbar-right li {
    padding-bottom: 0;
    padding-top: 0px;
}
.navbar .navbar-right li a {
    color: #ffffff;
    font-family: "Signika", sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding-top: 27px;
    padding-bottom: 10px;
    text-transform: uppercase;
    position: relative;
    display: block;
}
.navbar .navbar-right li a:hover {
    background-color: none;
    color: #f30336;
    transition: 1s;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: none;
    color: #f30336;
}
.navbar-inverse .navbar-brand {
    color: #fff;
    font-family: "Signika", sans-serif;
    font-size: 26px;
    font-weight: 600;
   //  margin-top: 10px;
    padding: 0px 35px;
    text-transform: uppercase;
   // margin-bottom: 18px; /* margin-bottom: 8px; */
}
.top-nav-collapse {
    background-color: #121111;
    padding-bottom: 10px;
    padding-top: 10px;
}
a:hover {
    text-decoration: none;
}
a:focus {
    outline: 0 solid;
}
.header-text {
    margin-top: 250px;
    color: #fff;
   // font-size: 60px;
    text-align: center;
}
.header-text h1 {
    font-family: 'Signika', sans-serif;
    font-size: 50px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}
.header-text p {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    margin-bottom: 50px;
}
.arrow {
    text-align: center;
    margin: 8% 0;
}
.bounce {
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
.bounce a {
    color: #f30336;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}
/*================================================
             5. ABOUT SECTION
==================================================*/

.about-section {
    background: #f4f7f9;
    padding-top: 50px;
    padding-bottom: 70px;
}
.about-heading h2 {
    color: #f30336;
    font-size: 36px;
    font-family: 'Signika', sans-serif;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 0px;
}
.about-heading hr {
    border-top: 3px solid #f30336;
    width: 5%;
    display: block;
    margin: 0px auto;
    padding-bottom: 70px;
}
.about-text p {
    color: #444;
    font-size: 16px;
    line-height: 28px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    padding-bottom: 20px;
}
.about-text button {
    border: none;
    padding: 12px 27px;
    color: #444;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    border: 1px solid #f30336;
}
.about-text button:hover {
    background: #f30336;
    border: none;
    color: #fff;
    padding: 12px 27px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    border: 1px solid #f30336;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}
.about-img img {
    padding-top: 7px;
    padding-bottom: 20px;
    width: 100%;
}
/*================================================
             6. SERVICES SECTION
==================================================*/

.service-section {
    padding-top: 50px;
    padding-bottom: 80px;
}
.service-heading h2 {
    color: #f30336;
    font-size: 36px;
    font-family: 'Signika', sans-serif;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 0px;
}
.service-heading hr {
    border-top: 3px solid #f30336;
    width: 5%;
    display: block;
    margin: 0px auto;
    padding-bottom: 70px;
}
.service-icon {
    text-align: center;
}
.service-icon i {
    font-size: 28px;
    color: #f30336;
    border: 1px solid #f30336;
    padding: 12px;
    border-radius: 30px;
    margin-top: 13px;
    text-align: center;
}
.service-icon i:hover {
    background: #f30336;
    color: #fff;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}
.service-wrap {
    border: 1px solid #f30336;
    padding: 20px 10px 30px;
}
.service-text h3 {
    color: #062033;
    font-size: 20px;
    font-family: 'Signika', sans-serif;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
	padding-bottom:10px;
}
.service-text h3 span {
    color: #f30336;
}
.service-text p {
    color: #444;
    font-size: 16px;
    line-height: 28px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    text-align: center;
}
/*================================================
             7. PORTFOLIO SECTION
==================================================*/

.portfolio-section {
    background: #f4f7f9 none repeat scroll 0 0;
    padding-bottom: 55px;
    padding-top: 50px;
}
.portfolio-heading h2 {
    color: #f30336;
    font-size: 36px;
    font-family: 'Signika', sans-serif;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 0px;
}
.portfolio-heading hr {
    border-top: 3px solid #f30336;
    width: 5%;
    display: block;
    margin: 0px auto;
    padding-bottom: 70px;
}
.portfolio-wrapper .mix {
    display: none;
}
.single-work {
    margin-bottom: 25px;
}
.single-work img {
    border-radius: 0px;
    width: 100%;
    height: auto;
}
.single-work a {
    overflow: hidden;
    position: relative;
    display: block;
}
.itemHovernew {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(243, 3, 54, 0.85);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}
.single-work a:hover .itemHovernew {
    opacity: 0.9;
    background-color: #f30336;
}
.hover-content i {
    border-radius: 50%;
    color: #fff;
    display: block;
    font-size: 30px;
    height: 35px;
    line-height: 35px;
    margin: 0 auto;
    width: 35px;
}
.filter-button-group ul {
    text-align: center;
    margin-bottom: 50px;
    padding-left: 0px;
}
.filter-button-group ul li {
    background: none;
    display: inline-block;
    color: #444;
    border: 1px solid #f30336;
    font-size: 16px;
    font-family: 'Signika', sans-serif;
    font-weight: 400;
    padding: 10px 40px 10px 40px;
    transition: 1s;
}
.filter-button-group ul li:hover {
    color: #fff;
    background: #f30336;
    border-radius: 0px;
    cursor: pointer;
}
.filter-button-group li.active {
    background: #f30336;
    color: #fff;
    font-size: 16px;
    font-family: 'Signika', sans-serif;
    font-weight: 400;
}
/*================================================
            8. TEAM SECTION
==================================================*/

.team-section {
    background: #fff;
    padding-top: 50px;
    padding-bottom: 70px;
}
.team-heading h2 {
    color: #f30336;
    font-size: 36px;
    font-family: 'Signika', sans-serif;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 0px;
}
.team-heading hr {
    border-top: 3px solid #f30336;
    width: 5%;
    display: block;
    margin: 0px auto;
    padding-bottom: 70px;
}
.members-image{
	 position:relative;
}
.members-image img{
	 width:100%;
}
.work-table {
	  display: table;
	  height: 100%;
	  text-align: center;
	  width: 100%;
}
.table-cell {
	  display: table-cell;
	  vertical-align: middle;
}
.members-image .overlay{
     position: absolute;
     bottom: 0;
     left:0;
     right: 100%;
     background:rgba(243,3,54,0.7);
     overflow: hidden;
     width:0;
     height: 100%;
     transition: .5s ease;
	 text-align:center;
	 display:inline-block;
}
.members-image:hover .overlay {
     width: 100%;
     right: 0;
}
.team-members .overlay h4 {
     color: #fff;
     font-family: "Signika",sans-serif;
     font-size: 24px;
     font-weight: 600;
	 text-transform:uppercase;
}
.team-members .overlay h5 {
     color: #fff;
     font-family: "Roboto",sans-serif;
     font-size: 20px;
     font-weight: 400;
     padding-bottom: 10px;
}
.team-members .overlay a{
	 color:#fff;
	 font-size:21px;
	 padding-left:5px;
	 padding-right:5px;
}
/*================================================
             9. TESTIMONIALS SECTION
==================================================*/

.testimonial-section {
    background: #f4f7f9;
    padding-top: 50px;
    padding-bottom: 70px;
}
.testimonial-heading h2 {
    color: #f30336;
    font-size: 36px;
    font-family: 'Signika', sans-serif;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 0px;
}
.testimonial-heading hr {
    border-top: 3px solid #f30336;
    width: 5%;
    display: block;
    margin: 0px auto;
    padding-bottom: 70px;
}
.single-testimonial {
    position: relative;
    background-color: #fff;
    padding: 20px 20px;
	padding-bottom:25px;
    border: 1px solid #ddd;
}
.single-author {
    padding-top: 10px;
}
.single-image {
    height: 125px;
    left: 20px;
    right: 0;
    width: 125px;
    margin: 0px auto;
}
.single-image img {
    border-radius: 50%;
    width: 100%;
}
.single-name {
    padding: 13px 0;
}
.single-name h4 {
    color: #062033;
    font-size: 16px;
    font-family: 'Signika', sans-serif;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.single-name {
    color: #444;
    font-size: 16px;
    font-family: 'Signika', sans-serif;
    font-weight: 400;
    text-align: center;
	padding-bottom:20px;
}
.single-content {
    color: #444;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    text-align: center;
}
.testimonial-list .owl-dots div.active {
    background: #f30336;
}
.testimonial-section .owl-dots {
    margin-top: 35px;
    text-align: center;
}
.testimonial-section .owl-dots div {
    background: #222 none repeat scroll 0 0;
    display: inline-block;
    height: 5px;
    margin-left: 5px;
    width: 15px;
}
/*================================================
             10. CONTACT SECTION
==================================================*/

.contact-section {
    //background: #fff;
    // padding-top: 50px;
   padding-bottom: 80px;
}
.contact-heading h2 {
    color: #f30336;
    font-size: 36px;
    font-family: 'Signika', sans-serif;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 0px;
}
.contact-heading hr {
    border-top: 3px solid #f30336;
    width: 5%;
    display: block;
    margin: 0px auto;
    padding-bottom: 70px;
}
#map {
    width: 100%;
    height: 400px;
    border: none;
}
.contact-form .form-control {
    border: 1px solid #f30336;
    border-radius: 0px;
    margin-bottom: 0px; /* 15px; */
    height: 50px;
    color: #6a6868;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
}
.contact-form #contact-message {
    height: 200px;
}
.contact-form .form-control::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: ##6a6868;
}
.contact-form .form-control::-moz-placeholder {
    /* Firefox 19+ */  
    color: ##6a6868;
}
.contact-form .form-control:-ms-input-placeholder {
    /* IE 10+ */ 
    color: ##6a6868;
}
.contact-form .form-control:-moz-placeholder {
    /* Firefox 18- */ 
    color: ##6a6868;
}
.contact-btn-wrapper {
    float: right;
}
.contact-form .button-reset {
    background: #f30336;
    border: medium none;
    color: #fff;
    border: 1px solid #f30336;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin-top: 10px;
    padding: 5px 15px;
    transition: all 1s ease 0s;
}
.contact-form .button-reset:hover {
    background: none;
    border: medium none;
    color: #f30336;
    border: 1px solid #f30336;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin-top: 10px;
    padding: 5px 15px;
    transition: all 1s ease 0s;
}
.contact-form .button-send {
    background: #f30336;
    border: medium none;
    color: #fff;
    border: 1px solid #f30336;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
   // margin-top: 10px;
    padding: 5px 15px;
    transition: all 1s ease 0s;
   // margin-left: 10px;
}
.contact-form .button-send:hover {
    background: none;
    border: medium none;
    color: #f30336;
    border: 1px solid #f30336;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin-top: 10px;
    padding: 5px 15px;
    transition: all 1s ease 0s;
}
.contact-form input.error {
    border: 2px solid #F00;
}
.contact-form textarea.error {
    border: 2px solid #F00;
}
.contact-form .error {
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-weight: 50;
    color: #F00;
}
/*================================================
             11. FOOTER SECTION
==================================================*/

.footer-section {
    background: #444 none repeat scroll 0 0;
    padding-bottom: 70px;
    padding-top: 80px;
}
.footer-text .social-icon {
    padding-bottom: 20px;
    text-align: center;
}
.footer-text .social-icon a i {
	background:#f30336;
    border: 2px solid #f30336;
    color: #fff;
    font-size: 21px;
    margin-right: 10px;
    padding: 10px;
    transition: all 0.5s ease-in-out 0s;
}
.footer-text .social-icon a i:hover {
    background: #fff;
    color: #f30336;
	border: 2px solid #f30336;
    font-size: 21px;
    margin-right: 10px;
    padding: 10px;
}
.footer-text p {
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}