/*
   Table Of Content:	
   
	1.	Global Style
	2.	Button Style
	3.	Preloader
	4.	Navigation Menu
	5.	Home Section
	6.	About Section
	7.	Showcase Section
	8.	Board Section
	8.1 Rotating Card
	9.	Testimonial Section
	10. News Section
	11. Contact Section
	12. Footer Section
	13. Responsive
*/

/* 1. Global Style */

html,
body {
    width: 100%;
    height: 100%;
}

::selection {
    background-color: #24b662;
    color: #ffffff;
}

::-moz-selection {
    background-color: #24b662;
    color: #ffffff;
}

a {
	color: #24b662;
    text-decoration: none;
}

a:hover {
    color: #ccc;
    text-decoration: none;
}

a:focus {
    outline: none;
    text-decoration: none;
}

.section-title {
    text-align: center;
}

.section-title h2 {
    margin-top: 0;
    font-weight: 600;
    border-bottom: 4px double #24b662;
	border-radius: 25px;
    font-size: 30px;
    margin: 0 auto;
    padding: 10px 0;
    width: 350px;
	margin-bottom: 30px;
}

.bg-cover {
	background-repeat: no-repeat;
}

.grabbing {
	cursor: url(../images/owl-carousel/grabbing.png) 8 8, move;
}

/* 2. Button Style */

.button {
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	padding: 25px 80px;
	display: inline-block;
	margin: 15px 30px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.button:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}


.button:before {
	font-family: 'FontAwesome';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.button-style {
	border-radius: 50px;
	border: 3px solid #fff;
	color: #fff;
	overflow: hidden;
}

.button-style:hover,
.button-style:active,
.button-style:focus {
	background: #24b662;
	color: #ffffff !important;
}

.button-style:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3.5;
	color: #fff;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.button-style:active:before {
	color: #17954c;
}

.button-style-icon:before {
	left: 130%;
	top: -2px;
}

.button-style-icon:hover:before {
	left: 80%;
}

.button-style-dark {
	border: 3px solid #000000 !important;
	color: #000000;
}

/* 3. Preloader */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #ffffff;
    z-index: 99999;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}

body.loaded #preloader{
    opacity: 0;
    visibility: hidden;
}

.loader{
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #24b662;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.loader:before{
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #24b662;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

.loader:after{
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #24b662;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* 4. Navigation Menu */

.nav-logo img {
	height: 100%;
	max-height: 50px;
	width: auto;
}

.navbar-fixed-top {
	background: #000;
	border: 0px;
	padding: 15px;
}

.top-nav-collapse {
	position: fixed;
	padding: 0px;
	background: #000;
    width: 100%;
    z-index: 9999;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.navbar-default .navbar-nav li a {
    background-color: transparent;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    -webkit-transition: .3s;
    transition: .3s;
    font-weight: 600;
}

.navbar-default .navbar-nav li a:hover {
    color: #fff;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.navbar-default .navbar-nav li a:focus {
    color: #24b662;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* 5. Home Section */

.home-section {
	min-height: 100vh;
	padding-top:200px;
    background: url(../images/bg/bg.jpg);
    background-size: cover;
}
}

.home-section:after {
    position: absolute;
    background: rgba(0, 0, 0, .7);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
}
.header-text {}

.home-section h2 {
    color: #f8f8f8;
    font-size: 50px;
    letter-spacing: 5px;
    margin: 0;
}

.home-section p {
    color: #f8f8f8;
    letter-spacing: 4px;
    font-size: 15px;
	margin-top: 40px;
	margin-bottom: 20px;
}

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

/* 6. About Section */

.about-section {
	width: 100%;
	min-height: 100vh;
	padding-top: 60px;
	background-color: #f5f5f5;
}

/* 7. Showcase Section */

.showcase-section {
	width: 100%;
	min-height: 100vh;
	padding-top: 60px;
	background-color: #efefef;
}
.no-padding{
	padding: 0px;
}
.item img {
    width: 100%;
}

.item {
    -webkit-transition: .3s;
    transition: .3s;
}

.portfolio .item:hover a:before{
  top: 40%;
  box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
  -webkit-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
}

.portfolio .item a:before{
  color: #ffffff;
  content: "\f00e";
  font-family: "FontAwesome";
  text-align: center;
  color: #ffffff;
  position: absolute;
  font-size: 25px;
  top: 2%;
  opacity: 0;
  left: 0%;
  right: 0%;
  background-color: #24b662;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  line-height: 70px;
  margin: 0 auto;
  -webkit-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
}

.portfolio .item a:hover:before{
  opacity: 1;
}

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
	margin-top: 40px;
    font-size: 50px;
    background-color: #24b662;
    width: 44px;
	right: 0px;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: inherit;
}


/* 8. Board Section */

.board-section {
	width: 100%;
	min-height: 100vh;
	padding-top: 60px;
	background-color: #F5F5F5;
}

/* 8.1 Rotating Card */

.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}
/* flip speed goes here */
.card {
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	-o-transition: -o-transform .5s;
	transition: transform .5s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #FFF;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}

/* front pane, placed above back */
.front {
	z-index: 2;
}

/* back, initially hidden pane */
.back {
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
	z-index: 3;
}

.btn-flip{
    position: absolute;
    left: 0;
    bottom: 0px;
}
/*        Style       */


.card{
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px;
    color: #444444;
}
.card-container, .front, .back {
	width: 100%;
	height: 400px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.16);
	-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.16);
	box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.16);
}
.card .cover{
    height: 105px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
}
.card .cover img{
    width: 100%;
}
.card .user{
    border-radius: 50%;
    display: block;
    height: 120px;
    margin: -55px auto 0;
    overflow: hidden;
    width: 120px;
}
.card .user img{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 4px solid #FFFFFF;
    width: 100%;
}

.card .content{
    padding: 10px 20px 20px;
}

/* 9. Info Section */

.info-section {
	width: 100%;
	padding-top: 60px;
    background: #F9F9F9;
}
.contact-us-detail i {
	font-size: 30px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0px 1px 2px 0px rgba(90, 91, 95, 0.15);
	transition: all 0.3s ease-in-out;
    width: 88px;
    height: 88px;
    line-height: 88px;
}

.contact-us-detail:hover i {
	box-shadow: 0px 8px 15px 0px rgba(90, 91, 95, 0.33);
    margin-top: -5px;
}



/* 10. News Section */

.testimonial-section {
	width: 100%;
	min-height: 100vh;
	padding-top: 60px;
    background: #F9F9F9;
}

.testimonial-carousel-list {
    padding: 30px;
    background-color: #fff;
    border-radius: 4px;
	box-shadow: 0px 1px 2px 0px rgba(90, 91, 95, 0.15);
    transition: all 0.3s ease-in-out;
	height:450px;
}

.testimonial-carousel-list:hover {
    box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
    top: -5px;
}

.testimonial-word {
    padding: 0px 100px;
}

.testimonial-word img {
	margin: 20 auto;
}

.testimonial-word h2 {
    font-size: 18px;
    text-transform: uppercase;
	color: #24b662;
    font-weight: 700;
    letter-spacing: 4px;
    margin: 20px 0px;
}

.testimonial-word p {
    line-height: 25px;
}

.owl-navi {
	color: #24b662;
}

.owl-navi:hover {
	color: #000000 !important;
}

.owl-theme .owl-controls .owl-buttons div {
    display: inline-block;
	vertical-align: bottom
    zoom: 1;
    margin: 5px;
    padding: 7px 13px;
	background-color: transparent;
    opacity: 1;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.board-space {
	margin-top: 20px;
}

/* 10. Proben Section */

.proben-section {
	width: 100%;
	padding-top: 60px;
    background: #efefef;
	padding-bottom:20px;
}

/* 11. Contact Section */

.contact-section {
	width: 100%;
	min-height: 100vh;
	padding-top: 60px;
    background: #F9F9F9;
}

.form-space {
	padding-top: 25px;
}
.form-group {
	margin-bottom: 25px;
}

.form-control {
	border: 2px solid transparent;
	height: 50px;
	border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px;
	-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
	   -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
	    -ms-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
		 -o-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
			box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
	-webkit-transition:all 150ms ease-in-out 0s;
	   -moz-transition:all 150ms ease-in-out 0s;
	    -ms-transition:all 150ms ease-in-out 0s;
	     -o-transition:all 150ms ease-in-out 0s;
		    transition:all 150ms ease-in-out 0s;
}
.form-control:focus {
	border-color: #171717;
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
	    -ms-box-shadow: none;
		 -o-box-shadow: none;
			box-shadow: none;
}

.form-control:focus {
	border-color: #24b662;
	border-width: 2px;
}


/* 12. Footer Section */

footer {
    background: #000;
    padding: 20px 0px;
    color: #f8f8f8;
}

footer p {
    font-size: 14px;
}

footer a {
    color: #ffffff;
}

/* 13. Responsive */
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.text-resize {
		font-size: 1.4em;
	}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
	.text-resize {
		font-size: 1.2em;
	}
}

@media only screen and (max-width: 767px) {
    .home-section {
        padding-top: 120px;
    }
    .home-section h2 {
        font-size: 22px;
    }
    .section-title h2 {
        font-size: 22px;
    }
    .testimonial-word {
        padding: 0;
    }
    .testimonial-carousel-list {
        margin-top: 0px;
    }
    .contact-us-detail {
        margin-bottom: 30px;
    }
}


@media only screen and (max-width: 555px) {  
     .section-title h2 {
         font-size: 16px;
       }
	   
      .section-title h2 {
         font-weight: 500;
         width: 200px;
     }
	 
      .section-title p {
         font-weight: 300;
         font-size: 12px;
      }
	  
     .home-section h2 {
         font-size: 18px;
      }
	  
     .home-section p {
         font-size: 12px;
      }
}

@media only screen and (max-width: 449px) {
	.button {
		padding: 15px 30px;
		font-weight: 600;
		font-size: 10px;
	}
	.button-style:before {
		display: none;
	}
}