/* =======================================================================
Perso - Personal Resume / CV / Portfolio Html Template
======================================================================= */
/*
1. TYPOGRAPHY
2. GLOBAL STYLES
3. HEADER
4. NAVGITION
5. ABOUT ME SECTION
5.1 = About me Left Area
5.2 = Available For freelance Effect
5.3 = About me Right Area
6. skills SECTION
6.1 = Progress-bar
7. SERVICES SECTION
8. RESUME SECTION
9. FUN FACTS SECTION
10. PORTFOLIO SECTION
10.1 = portfolio Filter Buttons
10.2 = Portfolio Pictures
11. TESTIMONIALS SECTION
12. BLOG POSTS SECTION
13. CONTACT SECTION
13.1 = Contact Right
13.2 = Contact Left
14. FOOTER
15. BLOG POST PAGE
15.1 = Blog Left Area
15.2 = Comments Area
15.3 = Blog Right Area
16. OTHER
16.1 = Mouse Effect
16.2 = Typed Cursor Effect
16.3 = Social Icons
16.4 = Preloader
17. Contact Page
*/
/*---------------------------------------
1. TYPOGRAPHY
-----------------------------------------*/
/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300');
/* --------------------------------------
2. GLOBAL STYLES
-----------------------------------------*/
body {
color: #232323;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 16px;
overflow-x: hidden;
}
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
color:#FFF;
}
a:hover {
text-decoration: none;
}
a:focus {
text-decoration: none;
}
h1, h2, h3, h4, h5 {
margin:0;
line-height: 1.1;
}
p,span,h1,h2,h3,h4,h5,a {
letter-spacing: 0.030em;
}
.clear {
clear:both;
}
.sect {
padding: 40px 0;
background: #000;
}
.sect .sec-title {
margin-bottom:60px;
}
.sect .sec-title h2 {
position: relative;
font-family: 'Josefin Sans', sans-serif;
font-size: 40px;
font-weight: 400;
color: #000;
}
.sect .sec-title h2:after {
content: ' ';
position: absolute;
width: 70px;
height: 1px;
bottom: -6px;
left: 0;
}
.option-box {
position: fixed;
top: 250px;
left: 0;
z-index: 9999;
}
.option-box .color-option {
float: left;
background: #FFF;
border: 1px solid #eee;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
color: #4c4c4c;
padding: 10px;
width: auto;
display: none
}
.option-box ul {
padding:0;
margin:0;
}
.option-box #t-title {
font-weight: bold;
}
.option-box span {
color: #4c4c4c;
font-size: 17px;
font-weight: 400
}
.option-box .color-option ul li {
width: 40px;
height: 40px;
display: inline-block;
margin-right: 3px;
cursor: pointer
}
.option-box .gear-check {
color: #4c4c4c;
background: #FFF;
cursor: pointer;
border: 1px solid #eee;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
padding: 13px 15px 13px 10px;
font-size: 20px;
float:left;
border-left-color: #FFF;
}
.option-box #maincolor {
background: #ff8700;
}
.option-box #color2 {
background: #e65959;
}
.option-box #color3 {
background: #5D9CEC;
}
.option-box #color4 {
background: #8CC152;
}
.option-box #color5 {
background: #fd9129;
}
.option-box #color6 {
background: #E9573F;
}
/* --------------------------------------
3. HEADER
-----------------------------------------*/
.s-header {
background: url(../img/IMG_4080.jpeg);
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
position: relative;
overflow-x: hidden!important;
}
.h-header {
background: url(../img/capacitive-touch-films-touch-screens-large.jpg);
background-attachment: fixed;
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
position: relative;
overflow-x: hidden!important;
}
.s-header .header-overlay {
position: absolute;
top: 0;
left: 0;
height: auto;
width: 100%;
background: rgba(0,0,0,.7) !important;
}
.s-header .middle-c {
display: table;
position: absolute;
height: 100%;
width: 100%;
font-family: 'Source Sans Pro', sans-serif;
color:#FFF;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.s-header .middle-c .middle-l {
display: table-cell;
vertical-align: middle;
}
.s-header .middle-c .middle-l .m-content {
margin-left: auto;
margin-right: auto;
}
.s-header .middle-l h5 {
letter-spacing: 2px;
font-size: 24px;
font-family: 'Josefin Sans', sans-serif;
}
.s-header .middle-l h1 {
font-size: 67px;
margin:10px 0;
letter-spacing: 3px;
text-transform: uppercase;
color: #ff8700;
}
.s-header .middle-l h3 {
letter-spacing: 5px;
position: relative;
font-size: 18px;
text-transform: uppercase;
font-family: 'Josefin Sans', sans-serif;
}
.s-header .middle-l h3 span {
letter-spacing: 3px;
font-size: 24px;
text-transform: uppercase;
}
.s-header .middle-l .typed-cursor {
border-bottom-width: 0;
}
/* --------------------------------------
4. NAVGITION
-----------------------------------------*/
.navbar-fixed-top {
background-color: transparent;
border-color: transparent;
padding: 20px 0 30px;
background: 0 0;
border: none;
border-radius: 0;
z-index: 9;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.navbar-fixed-top .navbar-nav>li {
font-size: 16px;
margin: 30px 20px;
font-weight: 400;
cursor: pointer;
position: relative;
}
.navbar-fixed-top .navbar-nav>li:last-child {
margin-right:14px;
}
.navbar-fixed-top .navbar-nav>li>a {
color: #FFF;
font-family: 'Josefin Sans', sans-serif;
margin: 0;
font-weight: 600;
padding: 0;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.navbar-fixed-top .navbar-nav>li>a:focus, .navbar-fixed-top .navbar-nav>li>a:hover {
background: transparent;
}
.navbar-fixed-top .navbar-brand {
font-family: 'Josefin Sans', sans-serif;
}
.navbar-fixed-top .navbar-brand, .navbar-fixed-top .navbar-brand:focus, .navbar-fixed-top .navbar-brand:hover {
font-weight: 700;
font-size: 28px;
padding-top: 25px;
}
.fixed {
background: #091932;
padding:0;
position: fixed;
-webkit-box-shadow: 0 0 13px #696969;
-moz-box-shadow:0 0 13px #696969;
-o-box-shadow: 0 0 13px #696969;
-ms-box-shadow: 0 0 13px #696969;
box-shadow: 0 0 13px #ddd;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
}
.fixed .navbar-nav>li>a {
color:#fff;
}
.navbar-toggle .icon-bar {
background: #000;
}
/* --------------------------------------
5. ABOUT ME SECTION
-----------------------------------------*/
.about-me {
text-align: left;
}
/* 5.1 = About me Left Area */
.about-me .ab-content .abc-left {
background:#ffffff87;
padding: 40px !important;
}
.about-me .ab-content .abc-left h4 {
margin: 0 0 20px;
line-height: 1.4;
color: #fff;
font-size: 16px;
font-weight: 600;
}
.about-me .ab-content .abc-left p {
font-weight: 400;
font-style: normal;
color: #000;
font-size: 14px;
line-height: 24pt;
text-align: justify;
}
/* 5.2 = Available For freelance Effect */
.about-me .ab-content .freel {
width: 100%;
position: relative;
margin-top: 25px;
height: 0;
}
.about-me .ab-content .freel span {
position: absolute;
font-size: 14px;
left: 54px;
top: 10px;
color:#111;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
}
.preloader-wave-effect {
height: 50px;
float: left;
position: absolute;
left: 0;
top: -5px;
}
.preloader-wave-effect:before,
.preloader-wave-effect:after {
-webkit-animation: 1.6s linear 0s normal none infinite running preloader-wave;
animation: 1.6s linear 0s normal none infinite running preloader-wave;
border-radius: 100%;
content: "";
height: 50px;
position: absolute;
width: 50px;
}
.available .preloader-wave-effect:before,
.available .preloader-wave-effect:after {
background: #2dcc70 none repeat scroll 0 0;
}
.notavailable .preloader-wave-effect:before,
.notavailable .preloader-wave-effect:after {
background: #e74c3c none repeat scroll 0 0;
}
.preloader-wave-effect:after {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes preloader-wave {
0% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
}
100% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes preloader-wave {
0% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
}
100% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
/* 5.3 = About me Right Area */
.about-me .ab-content .abc-right {
padding: 0;
}
.about-me .ab-content .abc-right ul {
padding: 0;
margin: 0;
}
.about-me .ab-content .abc-right ul li {
margin-bottom: 10px;
font-size: 14px;
line-height: 23pt;
}
.about-me .ab-content .abc-right li span {
float: left;
padding-right: 12px;
}
/* --------------------------------------
6. skills SECTION
-----------------------------------------*/
.skills {
padding-top: 0;
}
.skills p {
font-size: 20px;
margin-bottom: 25px;
font-family: 'Josefin Sans', sans-serif;
}
.skills li span {
font-size: 15px;
}
.skills .skills-left {
padding: 0 30px 0 0;
}
.skills .skills-right {
padding: 0 0 0 30px;
}
.skills .skills-bottom {
padding: 30px 0 0 0;
}
/* 6.1 = Progress-bar */
.skills li {
margin-bottom: 20px;
}
.skills li:last-child {
margin-bottom: 0;
}
.skills li .progress-bar {
position: relative;
background: 0 0;
box-shadow: none;
}
.skills li .progress {
position: relative;
background: 0 0;
height: 22px;
box-shadow: none;
margin-bottom: 0;
}
.skills li .progress, .skills-background {
border: none;
}
.skills li .progress::before {
position: absolute;
background: #dcdcdc;
}
.skills li .progress-bar::before {
position: absolute;
-webkit-transition: ease-out .7s;
-moz-transition: ease-out .7s;
-o-transition: ease-out .7s;
transition: ease-out .7s;
}
.skills li .progress-bar::before, .progress::before {
content: '';
top: 50%;
width: 100%;
height: 1px;
left: 0;
}
.skills li .progress-bar span {
position: absolute;
top: 2px;
right: 0;
background: #fff;
padding: 0 5px;
color: #111;
font-weight: 500;
font-size: 12px;
line-height: 16px;
}
/* --------------------------------------
7. SERVICES SECTION
-----------------------------------------*/
.services {
background: #fafafa;
padding: 80px 0 60px 0;
}
.services .service-box {
background: #fff;
text-align: center;
margin-bottom: 30px;
padding: 60px 30px;
-webkit-box-shadow: 0 5px 7px 0 rgba(0,0,0,0.20);
-moz-box-shadow: 0 5px 7px 0 rgba(0,0,0,0.20);
box-shadow: 0 5px 7px 0 rgba(0,0,0,0.20);
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
}
.services .service-box:hover, .service-box:focus {
-webkit-box-shadow: 0 7px 15px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 7px 15px 0 rgba(0,0,0,0.25);
box-shadow: 0 7px 15px 0 rgba(0,0,0,0.25);
}
.services .service-box:hover .service-icon, .service-box:focus .service-icon {
color: #FFF;
}
.services .service-icon {
display: inline-block;
width: 70px;
height: 70px;
margin-bottom: 25px;
border: 1px solid #9b9b9b;
border-radius: 50%;
line-height: 70px;
color: #9b9b9b;
font-size: 24px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
}
.services h5 {
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
font-size: 16px;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 25px;
}
.services span {
line-height: 26px;
color: #444;
font-size: 15px;
letter-spacing: .5px;
}
.services .service-box:hover h5 {
border-width: 3px;
}
/* --------------------------------------
8. RESUME SECTION
-----------------------------------------*/
.resume .education {
padding-left: 0;
}
.resume .resume-box {
position: relative;
margin-bottom: 35px;
}
.resume .resume-box:last-child {
margin-bottom: 0;
}
.resume .resume-box .left-content {
border:1px solid #d0d0d0;
padding: 30px;
text-align: center;
width: 180px;
position: relative;
}
.resume .resume-box .left-content .r-icon {
margin: auto;
position: absolute;
top: -21px;
left: 0;
bottom: 0;
right: 0;
}
.resume .resume-box .left-content .r-icon .icon-box {
padding: 8px;
width: 45px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
display: inline-block;
}
.resume .resume-box .left-content .r-icon i {
color: #FFF;
font-size: 22px;
}
.resume .resume-box .left-content h4 {
font-size: 15px;
letter-spacing: 1px;
font-weight: 900;
text-transform: none;
}
.resume .resume-box .left-content span {
color: #1e1e1e;
font-weight: 700;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.resume .resume-box .right-content {
position: absolute;
left: 200px;
top: 0;
}
.resume .resume-box .right-content p {
line-height: 26px;
color: #444;
font-size: 14px;
text-align: justify;
}
/* --------------------------------------
9. FUN FACTS SECTION
-----------------------------------------*/
.facts {
background-color: rgba(0,0,0,.8);
background-blend-mode: overlay;
background-image: url(../img/facts.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.facts i {
font-size: 46px;
}
.facts span {
font-size: 26px;
font-weight: 700;
margin: 20px auto;
color: #b4b4b4;
display: inline-block;
}
.facts h4 {
color: #FFF;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 2px;
}
/* --------------------------------------
10. PORTFOLIO SECTION
-----------------------------------------*/
.portfolio {
padding: 40px 0 70px 0;
}
/* 10.1 = portfolio Filter Buttons */
.portfolio .button-group {
margin-bottom:60px;
}
.portfolio .button-group a:first-child {
margin-left: 0;
}
.portfolio .button-group a {
color: #111;
margin: 0 15px;
letter-spacing: 3px;
text-transform: uppercase;
-webkit-transition: ease-out .2s;
-moz-transition: ease-out .2s;
-o-transition: ease-out .2s;
transition: ease-out .2s;
cursor: pointer;
padding: 7px 14px;
font-size: 14px
}
.portfolio .button-group .is-checked {
color:#FFF;
}
/* 10.2 = Portfolio Pictures */
.portfolio .portfolio-item {
padding: 0 5px 10px 0;
width: 25%;
}
.portfolio .portfolio-caption {
position: relative;
}
.portfolio .portfolio-caption img {
height: auto;
width: 100%;
max-width: 100%;
}
.portfolio .portfolio-caption .overlay {
position: absolute;
top: 0;
left: 0;
-webkit-transition: ease-out .3s;
-moz-transition: ease-out .3s;
-o-transition: ease-out .3s;
transition: ease-out .3s;
width: 100%;
height: 100%;
background: rgba(0,0,0,.8);
opacity: 0;
}
.portfolio .portfolio-caption .overlay:focus {
outline: none;
}
.portfolio .portfolio-caption .overlay span {
color: #FFF;
}
.portfolio .portfolio-item:hover .overlay {
opacity: 1;
}
.portfolio .portfolio-caption .info-content {
position: absolute;
bottom: 20px;
left: 20px;
}
.portfolio .portfolio-caption .img-link {
position: absolute;
top: 20px;
right: 20px;
}
.portfolio .portfolio-caption .info-content h4 {
color: #FFF;
font-size: 19px;
font-family: 'Josefin Sans', sans-serif;
}
.portfolio .portfolio-caption .info-content span {
margin-bottom: 20px;
font-size: 14px;
}
.portfolio .portfolio-caption:focus,
.portfolio .portfolio-item:focus,
.portfolio .portfolio-caption img:focus,
.portfolio .portfolio-caption a:focus {
outline: none;
}
/* --------------------------------------
11. TESTIMONIALS SECTION
-----------------------------------------*/
.carousel {
overflow-y: hidden;
}
.testimonials {
background: #f7f7f7;
}
.carousel-inner {
overflow: hidden;
}
.testimonials .t-item {
background: #FFF;
padding: 50px;
position: relative;
margin: 0 auto;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
float: none;
}
.testimonials .t-item:before {
position: absolute;
content: '\f10e';
font-family: FontAwesome;
right: 20px;
top: 20px;
font-size: 24px;
color: #eee;
}
.testimonials .t-item:after {
border: 8px solid transparent;
border-top-color: #fff;
position: absolute;
content: '';
display: block;
height: 0;
width: 0;
bottom: -16px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.testimonials .t-item .blockquote {
line-height: 1.8;
}
.testimonials .t-item .blockquote p {
color: #444;
font-size: 16px;
text-align: justify;
}
.testimonials .testimonials-content {
margin-top:15px;
}
.testimonials .testimonials-content h3 {
line-height: 1.4;
font-weight: 400;
color: #111;
font-size: 15px;
}
.testimonials .testimonials-content p {
font-weight: 400;
font-style: normal;
color: #777;
font-size: 13px;
margin-top: 2px;
}
.testimonials .testimonials-content p a {
font-weight: 300;
}
.testimonials .prev-next {
margin-top:14px;
}
.testimonials .prev-next span {
margin:0 7px;
}
.testimonials .prev-next i {
color: #111;
font-size: 25px;
}
/* --------------------------------------
12. BLOG POSTS SECTION
-----------------------------------------*/
.blog .blog-p .p-item {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.20);
-moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.20);
box-shadow: 0 5px 10px 0 rgba(0,0,0,0.20);
}
.blog .blog-p .p-item:focus,
.blog .blog-p .p-item:hover {
-webkit-box-shadow: 0 7px 15px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 7px 15px 0 rgba(0,0,0,0.25);
box-shadow: 0 7px 15px 0 rgba(0,0,0,0.25);
}
.blog .blog-p .p-item .p-picture {
position: relative;
}
.blog .blog-p .p-item .p-picture img {
width:100%;
}
.blog .blog-p .p-item .p-picture .p-date {
display: inline-block;
padding: 0.3em;
text-align: center;
position: absolute;
bottom: -10px;
right: 1em;
min-width: 44px;
}
.blog .blog-p .p-item .p-picture .p-date p {
display: block;
color: #fff;
line-height: 1;
font-size: 15px;
margin:6px 0;
}
.blog .blog-p .p-item .p-picture .overlay {
position: absolute;
background: #4f565e;
background: rgba(0,0,0,0.7);
width: 100%;
left: 0;
bottom: 0;
top: 0;
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.blog .blog-p .p-item a:hover .overlay {
opacity: 1;
}
.blog .blog-p .p-item .p-picture .overlay i {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color: #fff;
font-size: 30px;
}
.blog .blog-p .p-item .p-content {
padding:25px;
text-align: left;
}
.blog .blog-p .p-item .p-content a {
color: #111;
text-transform: uppercase;
}
.blog .blog-p .p-item .p-content h3 {
line-height: 25px;
font-size: 16px;
letter-spacing: 1.5px;
}
.blog .p-content .post-meta {
margin: 5px 0 25px 0;
}
.blog .p-content .post-meta ul li {
display: inline-block;
font-size: 12px;
margin-right: 10px;
}
.blog .p-content .post-meta span {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.blog .p-content .post-meta ul li a span,
.blog .p-content .post-meta ul li i {
color: #989898;
}
.left-post .post-meta ul li span {
padding-left: 2px;
display: inline-block;
}
.blog .p-content p {
color: #555;
font-size: 14px;
line-height: 1.8;
letter-spacing: 1px;
margin-bottom: 25px;
}
.blog .p-content .more {
font-size: 14px;
}
.contact .sec-title h2 {
color: #FFF;
}
/* 13.1 = Contact left */
.contact .contact-left {
padding-left: 0;
}
.contact .contact-left .contact-box {
margin-bottom: 30px;
}
.contact .contact-left .icon-box {
float: left;
color: #fff;
width: 40px;
height: 40px;
text-align: center;
line-height: 1;
padding: 12px;
}
.contact .contact-left .name-box {
padding-left: 50px;
min-height: 35px;
margin-bottom: 10px;
}
.contact .contact-left .name-box h4 {
margin: 0;
line-height: 37px;
font-weight: 400;
text-transform: uppercase;
font-size: 18px;
}
.contact .contact-left .content-box p {
margin-bottom: 0;
font-size: 14px;
line-height: 28px;
font-weight: 300;
color: #FFF;
}
/* 13.2 = Contact Right */
.contact-right {
padding-left: 0;
padding-right: 0;
}
.contact-item {
margin-bottom: 30px;
padding-right: 0;
padding-left: 0;
}
.contact-item:first-child {
padding-right: 15px;
}
.contact-item:last-child {
margin-bottom: 0;
}
.contact-item input:focus,
.contact-item textarea:focus {
outline: none;
}
.contact-item input,
.contact-item textarea {
width: 100%;
float: left;
font-size: 16px;
margin-bottom: 10px;
padding: 10px;
border: none;
border: 1px solid #a3a3a3;
background: 0 0;
color: #fff;
font-family: 'Josefin Sans', sans-serif;
}
.contact-item .button {
width: auto;
padding: 8px 22px;
color: #fff;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
margin-bottom: 0;
}
.contact-item .button:hover {
background: transparent;
}
.contact-item .parsley-required {
font-family: 'Josefin Sans', sans-serif;
color: #ED5565;
}
/* --------------------------------------
14. FOOTER
-----------------------------------------*/
.footer {
padding: 40px 0;
font-family: 'Josefin Sans', sans-serif;
background: #ffffffc7;
}
.footer .f-co p {
margin: 0;
}
/* --------------------------------------
15. BLOG POST PAGE
-----------------------------------------*/
.post-p {
background: #f5f5f5;
}
.post-head {
padding: 0;
background: #FFF;
}
.post-head .p-logo {
padding: 20px 0;
}
.post-head .p-logo a {
font-weight: 700;
font-size: 28px;
}
.post-head .head-background {
background: #111;
padding: 80px 0;
}
.post-head .head-background h3 {
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 32px;
margin-bottom: 15px;
font-family: 'Josefin Sans', sans-serif;
}
.post-head .head-background p {
color: #777;
font-size: 15px;
}
.post-head .head-background p a {
color: #FFF;
}
.blog-area {
float:left;
padding: 80px 0;
}
.blog-area .left-post .bg-area {
background: #FFF;
padding: 0 0 40px 0;
float: left;
}
.blog-area .right-post {
padding-left: 30px;
float: left;
}
.blog-area .right-post .widget {
background: #FFF;
padding: 20px;
margin-bottom: 40px;
}
.blog-area .right-post .widget .widg-title {
margin-bottom: 27px;
}
.blog-area .right-post .widget .widg-title h5 {
color: #111;
font-size: 19px;
font-weight: 400;
position: relative;
}
.blog-area .right-post .widget .widg-title h5:after {
content: ' ';
position: absolute;
width: 70px;
height: 1px;
bottom: -7px;
left: 0;
}
.blog-area .right-post .widget:last-child {
margin-bottom: 0;
}
/* 15.1 = Blog Left Area */
.left-post .img-post img {
width: 100%;
height: auto;
}
.left-post .post-meta {
padding: 40px 20px;
}
.left-post .post-meta h3 {
text-transform: uppercase;
float:left;
color: #111;
font-size: 21px;
font-weight: 400;
}
.left-post .post-meta ul {
clear: both;
}
.left-post .post-meta ul li {
display: inline-block;
margin: 10px 10px 0 0;
font-size: 13px;
}
.left-post .post-meta ul li i,
.left-post .post-meta ul li span {
color: #989898;
}
.left-post .post-content {
padding:0 20px;
}
.left-post .post-content p {
text-align: justify;
font-weight: normal;
font-size: 14px;
line-height: 28px;
font-weight: 300;
color: #555;
float: left;
margin: 0;
}
.left-post .post-content .blockquote {
border: 1px solid #f6f6f6;
color: #666;
float: left;
font-size: 14px;
background: #f6f6f6;
line-height: 1.8;
padding: 15px 35px;
margin: 15px 0;
}
/* 15.2 = Comments Area */
.blog-area .left-post .comments {
margin-top: 40px;
padding: 40px 20px;
width: 100%;
}
.blog-area .left-post .comments-form {
margin-top: 40px;
padding: 40px 0 40px 20px;
width: 100%;
}
.blog-area .left-post .comments-form .contact-item {
padding-right: 20px;
}
.blog-area .left-post .post-t {
margin-bottom: 40px;
}
.blog-area .left-post .comment-box .img-area {
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border: 1px solid #ebebeb;
padding: 3px;
overflow: hidden;
float: left;
background: #eee;
}
.blog-area .left-post .comment-box .comnt-area {
padding-left: 15px;
}
.comment-box {
margin-bottom: 40px;
}
.comment-box:last-child {
margin-bottom: 0;
}
.comment-box .user-img {
width: 70px;
}
.comment-box .user-img img {
width:100%;
height: 70px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
overflow: hidden;
float: left;
background: #eee;
}
.comment-box .comnts {
margin-left: 85px;
}
.comment-box .comnts h5 {
font-size: 17px;
font-weight: 400;
}
.comment-box .comnts span {
color: #989898;
font-size: 12px;
margin-top: 5px;
}
.comment-box .comnts span a {
color: #989898;
margin-left: 10px;
}
.comment-box .comnts span a i {
padding-right: 3px;
}
.comment-box .comnts p {
margin-top: 15px;
font-size: 14px;
color: #555;
line-height: 25px;
}
.comm-reply {
margin-left: 70px;
}
.comments textarea,
.comments input {
color: #111;
}
/* 15.3 = Blog Right Area */
.widget .form-control {
border: 2px solid #eee;
border-radius: 2px;
box-shadow: none;
color: #999999;
font-size: 14px;
height: 39px;
}
.widget ul li {
padding: 10px 0;
border-bottom: 1px dashed #eee;
}
.widget ul li:first-child {
padding-top: 0;
}
.widget p,
.widget ul li a {
color: #555;
font-size: 16px;
font-family: 'Josefin Sans', sans-serif;
}
.widget .widget-item {
padding: 20px 0;
border-bottom: 1px dashed #eee;
overflow: hidden;
font-family: 'Josefin Sans', sans-serif;
}
.widget .widget-item img {
float: left;
width: 30%;
padding-right: 10px;
}
.widget .widget-item h6 {
font-size: 14px;
font-weight: 700;
margin-top: 0;
}
.widget .widget-item span {
color: #555;
}
.post-footer {
background: #FFF;
}
/*---------------------------------------
16. OTHER
-----------------------------------------*/
/* 16.1 = Mouse Effect */
.mouse{
position: absolute;
z-index: 1;
left: 50%;
margin-left: -14px;
bottom: 30px;
width: 25px;
height: 45px;
text-align: center;
border: 1px solid #FFF;
opacity: 0.7;
border-radius: 27px;
}
.mouse-white{
border-color: #fff;
}
.mouse:after{
content:'';
position: absolute;
top: 29%;
left: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: #FFF;
-webkit-animation: mouseScroll 1.8s linear infinite;
-moz-animation: mouseScroll 1.8s linear infinite;
animation: mouseScroll 1.8s linear infinite;
}
.mouse-white:after{
background-color: #fff;
}
@-webkit-keyframes mouseScroll {
0% { opacity: 1;top: 29%;}
15% {opacity: 1;top: 50%;}
50% { opacity: 0;top: 50%;}
100% { opacity: 0;top: 29%;}
}
@-moz-keyframes mouseScroll {
0% {opacity: 1;top: 29%;}
15% {opacity: 1;top: 50%;}
50% {opacity: 0;top: 50%;}
100% {opacity: 0;top: 29%;}
}
@keyframes mouseScroll {
0% {opacity: 1;top: 29%;}
15% {opacity: 1;top: 50%;}
50% {opacity: 0;top: 50%;}
100% {opacity: 0;top: 29%;}
}
/* 16.2 = Typed Cursor Effect */
.typed-cursor {
position: absolute;
bottom: 1.7px;
}
.typed-cursor {
opacity: 1;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
animation: blink 1s 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
}
}
/* 16.3 = Social Icons */
.social-n {
margin-bottom:10px;
}
.social-n a {
margin:0 10px;
}
.social-n .s-icon {
display: inline-block;
border: 1px solid #FFF;
width: 25px;
height: 25px;
margin: 0 auto;
background-color: #292929;
padding-top: 2px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
}
.social-n .s-icon i {
font-size: 1em;
color:#FFF;
}
/* 16.4 = Preloader */
.preloader-wrap {
background: #000 none repeat scroll 0 0;
height: 100%;
position: fixed;
width: 100%;
z-index: 999999;
}
.cubes {
width: 73px;
height: 73px;
position: absolute;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
z-index: 99999;
top: 50%;
left: 50%;
margin-left: -36px;
margin-top: -35px;
}
.cubes .cube {
position: relative;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
}
.cubes .cube {
float: left;
width: 50%;
height: 50%;
position: relative;
transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
.cubes .cube:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(255,255,255);
animation: cssload-fold-thecube 2.04s infinite linear both;
-o-animation: cssload-fold-thecube 2.04s infinite linear both;
-ms-animation: cssload-fold-thecube 2.04s infinite linear both;
-webkit-animation: cssload-fold-thecube 2.04s infinite linear both;
-moz-animation: cssload-fold-thecube 2.04s infinite linear both;
transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
}
.cubes .cube-c2 {
transform: scale(1.1) rotateZ(90deg);
-o-transform: scale(1.1) rotateZ(90deg);
-ms-transform: scale(1.1) rotateZ(90deg);
-webkit-transform: scale(1.1) rotateZ(90deg);
-moz-transform: scale(1.1) rotateZ(90deg);
}
.cubes .cube-c3 {
transform: scale(1.1) rotateZ(180deg);
-o-transform: scale(1.1) rotateZ(180deg);
-ms-transform: scale(1.1) rotateZ(180deg);
-webkit-transform: scale(1.1) rotateZ(180deg);
-moz-transform: scale(1.1) rotateZ(180deg);
}
.cubes .cube-c4 {
transform: scale(1.1) rotateZ(270deg);
-o-transform: scale(1.1) rotateZ(270deg);
-ms-transform: scale(1.1) rotateZ(270deg);
-webkit-transform: scale(1.1) rotateZ(270deg);
-moz-transform: scale(1.1) rotateZ(270deg);
}
.cubes .cube-c2:before {
animation-delay: 0.255s;
-o-animation-delay: 0.255s;
-ms-animation-delay: 0.255s;
-webkit-animation-delay: 0.255s;
-moz-animation-delay: 0.255s;
}
.cubes .cube-c3:before {
animation-delay: 0.51s;
-o-animation-delay: 0.51s;
-ms-animation-delay: 0.51s;
-webkit-animation-delay: 0.51s;
-moz-animation-delay: 0.51s;
}
.cubes .cube-c4:before {
animation-delay: 0.765s;
-o-animation-delay: 0.765s;
-ms-animation-delay: 0.765s;
-webkit-animation-delay: 0.765s;
-moz-animation-delay: 0.765s;
}
@keyframes cssload-fold-thecube {
0%, 10% {
transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}
@-o-keyframes cssload-fold-thecube {
0%, 10% {
-o-transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-o-transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-o-transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}
@-ms-keyframes cssload-fold-thecube {
0%, 10% {
-ms-transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-ms-transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-ms-transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}
@-webkit-keyframes cssload-fold-thecube {
0%, 10% {
-webkit-transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}
@-moz-keyframes cssload-fold-thecube {
0%, 10% {
-moz-transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-moz-transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-moz-transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}
/*---------------------------------------
17. CONTACT PAGE
-----------------------------------------*/
.contact-p {
background: #fafafa;
}
.contact-f {
float: none;
text-align: center;
background: #FFF;
margin: 80px auto;
padding: 60px 30px;
-webkit-box-shadow: 0 5px 7px 0 rgba(0,0,0,0.20);
-moz-box-shadow: 0 5px 7px 0 rgba(0,0,0,0.20);
box-shadow: 0 5px 7px 0 rgba(0,0,0,0.20);
}
.contact-f h3 {
font-size: 19px;
margin-top: 30px;
}
.contact-success i {
color: #8cc152;
}
.contact-nosuccess i {
color: #e9573f;
}
.footer .f-co a {
color: #232323;
}
@media screen and (max-width: 414px){
.s-header {
height: 315px;
}
}
.sec-title h2 {
position: relative;
font-family: 'Josefin Sans', sans-serif;
font-size: 35px;
font-weight: 400;
color: #000;
}
.sec-title h2:after {
background: #ff8700;
}
.sec-title h2:after {
content: ' ';
position: absolute;
width: 70px;
height: 1px;
bottom: -6px;
left: 0;
}
.awords-container {
padding-bottom: 30px;
padding-top: 30px;
}
.awords{
margin-top: 30px;
text-align: center;
}
.fot.col-md-12 {
padding-bottom: 10px;
padding-top: 10px;
background: #000;
}
.backc{
background: url(../img/suny.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: relative;
background-attachment: fixed;
background-position: center center;
}
.abc-left p{
color: #fff;
}
.fot.col-md-12 {
background-color: #000;
padding-top: 7px;
padding-bottom: 2px;
}
.vvv {
background-color: #ffffff87;
padding: 50px;
}
.border {
border: 1px solid #000 !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
}