/* =================================================

Template Name:  Mark Thomas - Personal Portfolio HTML Template
Author: MouriThemes
Version: 1.0
Design and Developed by: MouriThemes

NB: This file contains the styling for the actual theme, this is the file you need to edit to change the look of the theme.

=================================================== */

/*Table of Content


    1. Default css
    2. Preloader css
    3. Mouse Animation css
    4. Nav Area css
    5. Banner Area css
    6. About Area css
    7. Services Area css
    8. Number Area css
    9. Portfolio Area css
    10. Testimonial Area css
    11. Contact Area css
    12. Brand Area css
    13. Footer Area css


*/

/*--- 1. Default css starts ---*/

html,body{
    height: 100%;
}

body{
    font-family: 'Poppins', sans-serif;
    width: 100%;
    height: 100%;
    font-size: 15px;
    line-height: 1.7;
    color: #6f6f6f; 
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6{
    color: #333333;
    font-weight: 600;
}

p {
    letter-spacing: 0;
    line-height:1.8;
}

a{
    text-decoration: none;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

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

ul,li{
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

.section-padding{
    padding: 60px 0;
}

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

.section-header h2 {
	display: inline-block;
	padding: 5px;
	margin: 5px 0;
	text-transform: uppercase;
	font-weight: bold;
}

.section-header::before {
	content: '';
	width: 100%;
	height: 1px;
	background: #000;  
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 200px; 
}
.section-header::after {
	content: '';
	width: 60px;
	height: 2px;
	background: #ea1538;
	position: absolute;
	bottom: 0;
	left: calc(50% - 30px); 
}

/*---Default css ends---*/

/*-------------- 2. Preloader css starts ---------------*/

.loader_bg {
    position: fixed;
    z-index: 9999999;
    background: #fff;
    width: 100%;
    height: 100%;
}

.loader {
    border: 0 solid transparent;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: calc(50vh - 75px);
    left: calc(50vw - 75px);
}

.loader:before, .loader:after {
    content: '';
    border: 1em solid #232323; 
    border-radius: 50%;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    animation: loader 2s linear infinite;
    opacity: 0;
}

.loader:before {
    animation-delay: .5s;
}

@keyframes loader {
    0% {
        transform: scale(0);
        opacity: 0; }
    50% {
        opacity: 1; }
    100% {
        transform: scale(1);
        opacity: 0; }
}


/*-------------- Preloader css ends ---------------*/



/*---------- 4. Nav area css starts -------------*/

.nav-area{
    height: 65px;
}

.nav-area.sticky_navigation{
    background: #ffffff;
    height: 80px;
}

.navbar-nav {
    margin-top: 15px;
}

.sticky_navigation{
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out ;
    transition: all 0.4s ease-out ;
    -webkit-box-shadow: 0px 3px 4.6px 0.3px rgba(0,0,0,0.25);
    box-shadow: 0px 3px 4.6px 0.3px rgba(0,0,0,0.25);
}

.sticky_navigation .main-menu{
    margin-top: 0;
}

.sticky_navigation .navbar-brand, .sticky_navigation .navbar-brand span {
    color: #232323;
}

.sticky_navigation .navbar-brand:hover, .sticky_navigation .navbar-brand:focus, .sticky_navigation .navbar-brand span {
    color: #232323; 
}

.sticky_navigation .nav li a {
    color: #000; 
}

.sticky_navigation .nav li.active a{
    color: #ea1538;   
} 

.sticky_navigation .navbar-brand:hover{
    color: #ffffff;
}

.main-menu{
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    margin-top: 10px;
}

.navbar{
    border:0;
    margin-bottom: 0;
}

.navbar-brand{
    padding: 25px 0; 
    font-size: 25px;
    display: block;
    color: #000; 
    font-weight: 800;
}

.logo {
	padding: 5px;
	font-size: 20px;
	font-weight: 100;
}

.navbar-brand:focus, .navbar-brand:hover {
    text-decoration: none;
    color: #000; 
}

.navbar-right li{
    display: inline-block;
    float: none;
}

.navbar-right li a{
    color: #000; 
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px; 
}

.navbar-right li.active a{
    font-weight: bold;
    color: #ea1538; 
}

.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus{
    background: none;
}

.navbar-toggle .icon-bar{
    background: #033D75;
}

/*---------- Nav area css ends -------------*/

/*----------- 5. Banner area css starts--------------*/


.banner-area{
    background-image: url(../images/home/1.jpg); /*--edit image--*/         
    background-position: center;
    background-size:cover;
    position: relative;
    height: 100%;
}

.banner-table{
    display: table;
    margin: 0;
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 1;
}
canvas{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.banner-table-cell{
    display: table-cell;
    vertical-align: middle;
    text-align: left; 
}

.welcome-text .intro h2 {
    color: #fff;
    font-size: 85px;
    font-weight: 800;
    margin-bottom: 10px;
}

.intro h1 {
	color: #ea1538;
	font-size: 50px;
	font-weight: 400;
	margin: 0;
	text-transform: uppercase;
}

.ah-headline.clip .ah-words-wrapper::after {
    background-color: #000;
}

.banner-btn {
	background: #ea1538;
	text-decoration: none;
	padding: 10px 30px;
	display: inline-block;
	margin-top: 25px;
	color: #fff;
	text-transform: uppercase;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	border: 2px solid #ea1538;
}
.banner-btn:hover, .banner-btn:focus {
    text-decoration: none;
    color: #000000; 
}
.banner-btn:hover {
	background: transparent;
	color: #000000;  
}
.welcome-text h3 {
	color: #000;
	text-transform: uppercase;
}

/*---------Banner area css ends--------------*/

/*---------- 6. About area css starts---------------*/

.about-text-left h2 {
    font-weight: 700;
    font-size: 36px;
    color: #212121;
    line-height: 1;
    text-align: right;
    margin-bottom: 5px;
}

.about-text-left h3 {
    color: #212121;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: right;
    margin-bottom: 18px;
}

.about-text-left a {
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	background: #ea1538;
	padding: 10px 25px;
	text-decoration: none;
	border-radius: 50px;
	border: 2px solid #ea1538;
	margin-top: 30px;
	display: inline-block;
}

.about-text-left a:hover {
	background: transparent;
	color: #000;
}

.about-text-right {
    margin-top: 90px;
}

.about-text-right img {
	width: 100%;
}

.about-text-left {
    margin-top: 90px;
}

.about-text-left p {
    font-size: 15px;
    width: 90%; 
}
.line-area {
	margin-top: 30px;
}


.skillbar {
    margin-bottom: 50px;
    position: relative;
    width: 100%;
    display: block;
}

.skillbar .skillbar-title {
    display: inline-block;
    vertical-align: middle
}

.skillbar .skillbar-percent {
    float: right;
    display: inline-block;
    vertical-align: middle
}

.skillbar-bar {
    background-color: #ededed;
    width: 100%;
    height: 5px
}

.skillbar-bar .skillbar-child {
    width: 0;
    height: 100%;
    background-color: #ea1538;
    -webkit-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color
}

/*-------About area css ends--------------*/

/*---------------7. Services area Starts--------------*/


.md-mb-55{
        margin-bottom: 55px;   
    } 

.single-services{
    padding: 30px 20px;
    text-align: center; 
}


.single-services i {
    font-size: 50px;
    text-align: center;
    height: 80px;
    padding-top: 10px;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

.single-services:hover i {
    color: #ea1538; 
    padding: 0;
    font-weight: bold; 
}

.single-services h2{
    font-weight:600;
    font-size: 17px; 
}

/*--------------- Services area ends --------------*/


/*-------------- 9. Portfolio area starts-----------*/


.project-item img {
    width: 100%;
}

.overlay {
	position: absolute;
	top: 15px;
	left: 15px;
	bottom: 15px;
	right: 15px;
	background: rgba(255, 255, 255, 0.8);  
	opacity: 0;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	cursor: crosshair;
    transform: scale(0.6);
}

.overlay .overlay-inner {
    position: absolute;
    top: 35%;
    width: 100%;
    text-align: center;
}

.overlay .overlay-inner h4 {
    color: #232323!important; 
    margin-bottom: 0!important;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
    text-transform: uppercase;
    font-size: 25px;
    letter-spacing: 1px;
}

.overlay .overlay-inner p {
    color: #232323; 
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
    margin-top: 10px;
}

.project-item:hover .overlay .overlay-inner h4 {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.project-item:hover .overlay .overlay-inner p {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.project-item a:hover .overlay {
    opacity: 1;
    transform: scale(1);
    transition: .8s;
}

ul.port-nav-list {
	padding: 0 0 50px 0;
	list-style: none;
	text-align: center;
	margin-top: 25px;
}

ul.port-nav-list li {
    display: inline-block;
    margin-right: 10px; 
    background: transparent; 
    border-radius: 50px;
    border: 1px solid #ea1538; 
}

ul.port-nav-list li a {
	display: block;
	cursor: pointer;
	color: #232323; 
	font-size: 14px;
	padding: 8px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 400;
    border-radius: 50px; 
}

ul.port-nav-list li a.active {
	color: #ffffff;
	border-color: #ea1538;
	background: #ea1538; 
}

ul.port-nav-list li:hover a.active { 
	color: #fff;
}

.port-items {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.portfolio-items .port-items .single-port {
    overflow: hidden;
    margin-bottom: 25px;
}

.single-port {
    padding: 0; 
}

/*--------------Portfolio area Ends-----------*/

/*-------- 10. Testimonial area starts-----------*/


.testimonial-content p {
    font-weight: 400;
    font-size: 18px;
}

.single-testimonial {
    margin: 0 49px 29px;
    padding: 40px 30px 40px;
    position: relative;
    color: #818181;
    text-align: center;
}

.single-testimonial .testimonial-content{
    margin-bottom: 30px;
    font-size: 15px;
}

.single-testimonial .pic {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin-right: 15px;
    border-radius: 50%;
    overflow: hidden;
}

.single-testimonial .pic img{
    width: 100%;
    height: 100%;
}

.single-testimonial .testimonial-title small{
    font-size: 15px;
    color:#292F36;
    font-weight: 600;
}

.owl-theme .owl-controls{
    margin-top: 50px;
    margin-left: 30px;
}

.owl-dots{
    text-align: center;
}

.owl-dot {
    display: inline-block;
    height: 15px !important;
    width: 15px !important;
    background-color: #000 !important;
    opacity: 0.8;
    border-radius: 50%;
    margin: 0 5px;
}

.owl-dot.active {
    background-color: #ea1538 !important; 
}


/*-------Testimonial area ends----------*/



/*---- 15. Blog News Area css Starts ------*/

.blog-news-area .header-text>h2 {
    left: 33%;
}

.blog-news-area .header-text {
    margin-bottom: 100px;
}

.news-img {
    position: relative;
    overflow: hidden;
}

.news-img img {
    width: 100%;
}

.single-blog-news:hover .news-date {
    background: #f1c40f none repeat scroll 0 0;
    color: #ffffff;
    -webkit-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.single-post>h2 {
    color: #353535;
    font-size: 20px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 2.5;
    margin: 0;
}

.single-post>h5 {
    font-size: 13px;
    font-weight: 600;
    color: #555555;
}

.single-post h5 span {
    margin: 0 20px;
    padding: 0;
}

.single-post i {
    margin-right: 5px;
    color: #232323; 
}

.single-post>p {
    font-size: 14px;
    padding: 0 20px;
    text-align: left;
}

.single-post > a {
	display: inline-block;
	font-size: 13px;
	margin: 25px 0;
	text-transform: uppercase;
	padding: 10px 30px;
	border-radius: 25px;
	background: #ea1538;
	color: #fff;
	font-weight: 600;
	letter-spacing: 1px;
	border: 1px solid #ea1538; 
}

.single-post>a:hover {
    border-radius: 25px;
    display: inline-block;
    text-decoration: none;
    color: #000;
    background: transparent; 
}



.single-post {
    border-left: 1px solid #DADADA;
    border-right: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
    border-top: 1px solid transparent;
}

.single-blog-news {
    box-shadow: rgba(58, 78, 95, 0.2) 0 10px 16px, rgba(58, 78, 95, 0.05) 0 -5px 16px;
}

.news-date {
    font-weight: bold;
    height: 35px;
    left: 0;
    line-height: 35px;
    position: absolute;
    text-align: center;
    bottom: 50px;
    color: #ffffff;
}

.news-date span:first-child {
	color: #fff;
	font-size: 30px;
	background: #ea1538;
	padding: 10px 20px; 
}

.news-date span:last-child {
    display: block;
    background: #eeeeee;
    color: #333;
    padding: 5px 0;
}

.news-date span {
    font-size: 11px;
    text-transform: uppercase; 
}

/*---- Blog News Area Ends ----*/ 


/*------ 11. Contact area starts-------*/



.contact-area .form-control {
	border: 2px solid #a2a2a2;
	box-shadow: none;
	padding: 14px 18px;
	border-radius: 0;
	margin-bottom: 30px;
	text-overflow: ellipsis;
    height: 50px; 
}

.top-contact-text {
    margin-bottom: 50px;
    text-align: center;
}

.contact-area textarea.form-control{
    border:2px solid #a2a2a2;
    padding: 6px;
    height: 250px;
    margin-bottom: 30px;
    padding: 14px 18px; 
}

.btn.btn-send {
	background-color: #ea1538;
	color: #fff;
	padding: 10px 35px;
	display: inline-block;
	margin-top: 30px;
	border-radius: 25px;
	text-decoration: none;
	letter-spacing: 2px;
	border: 1px solid #ea1538;
	transition: .9s;
}

.btn.btn-send:hover{
    background: transparent;
    color: #000; 
}

.top-contact-text h2{
    margin-top: 2px;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 3px;
}

.top-contact-text p{
    line-height: 21px;
    letter-spacing: 2px;
    font-size: 11px;
    color: #777;
}

.contact-icon li{
    display: inline-block;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-right: 25px;
}

.contact-icon a {
    display: inline-block;
    height: 40px;
    width: 40px;
    font-size: 16px;
    color: #fff;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border: 2px solid #ea1538;
    background: #ea1538;
    line-height: 2.5;
    text-align: center;
}

.contact-icon a:hover{
    background: transparent;
    color: #000;
}

.contact-icon a i{
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.contact-icon {
    text-align: center;
    margin-bottom: 25px;
}

.cuss-btn{
    text-align: center; 
}

/*-------- Contact area ends----------- */


/*--------------11. Footer area starts -------------*/


.footer-area {
    background: #232323;
    color: #838383;
    padding: 30px 0;
}
.footer-area a{
    color: #ffffff;  
}

/*--------------- Footer area ends -------------*/