/*
Author       : Syed Ekram.
Template Name: Sobnom - Personal Resume Template.
Version      : 1.0
*/
/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, section-title, preloader btn, overlay, section-padding etc)
    02. START TAB MENU DESIGN
    03. START ABOUT ME DESIGN
    04. START PROGRESS BAR DESIGN
    05. START WORK PROCESS DESIGN
    06. START TESTIMONIAL DESIGN
    07. START MY SERVICE DESIGN
    08. START PRICING TABLE DESIGN
    09. START COUNT DOWN DESIGN
    10. START PORTFOLIO DESIGN
    11. START BLOG DESIGN
    12. START CONTACT ADDRESS DESIGN
    13. START CONTACT FORM DESIGN     
    14. START MAP DESIGN     
    15. START FOOTER DESIGN    
=============================================================*/
/*01.START GENERAL STYLE*/
body {
    background-color: #f1f1f1;
    color: #444444;
    font-family: "Source Sans Pro",sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
}
a:link,
a:visited,
a:foucs {
    color: #fff;
    text-decoration: none;
}
a { outline: none !important }
a:hover { text-decoration: none }
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #5d5d5d;
    font-family: "Montserrat",sans-serif;
    font-weight: 700;
    line-height: 100%;
    margin: 0;
}
.section-title h4 {
    background: #222 none repeat scroll 0 0;
    color: #fff;
    margin: 0 0 40px;
    padding: 20px 0;
    text-transform: uppercase;
}
.no-padding { padding: 0 }
/*START PRELOADER DESIGN*/
.preloader {
    background: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}
.status,
.status-mes {
    background-image: url(../img/status.gif);
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -100px;
    position: absolute;
    top: 50%;
    width: 200px;
}
/*END PRELOADER DESIGN*/
/*START BTN*/
.btn-light-bg {
backface-visibility: hidden;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
display: inline-block;
position: relative;
transform: translateZ(0px);
transition-duration: 0.5s;
transition-property: color;
vertical-align: middle;
background: #FF2B42;
color: #fff;
padding: 10px 30px;
font-family: "Montserrat",sans-serif;
text-transform: uppercase;
}
.btn-light-bg:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FC5466;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.btn-light-bg:hover, .btn-light-bg:focus, .btn-light-bg:active {
  color: white;
}
.btn-light-bg:hover:before, .btn-light-bg:focus:before, .btn-light-bg:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
/*END BTN*/
/*01.END GENERAL STYLE*/
/*02.START TAB MENU */
ul.tab-buttons {
    margin-bottom: 30px;
    margin-top: 20px;
    padding: 0;
}
ul.tab-buttons li {
    background: #ff2b42 none repeat scroll 0 0;
    box-shadow: 0 11px 10px 0 rgba(0, 0, 0, 0.1);
    display: inline-block;
    height: 130px;
    margin-right: 24px;
    transition: all 0.4s ease 0s;
    width: 167px;
}
ul.tab-buttons li.selected {
    background: #ff2b42 none repeat scroll 0 0;
    transition: all 0.4s ease 0s;
}
ul.tab-buttons li.selected:hover { background: #FD4559 }
/*END TAB MENU ONE*/
ul.tab-buttons li.selected2 {
    background: #1cbac8;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
ul.tab-buttons li.selected2:hover { background: #2AC7D5 }
/*END TAB MENU TWO*/
ul.tab-buttons li.selected3 {
    background: #00cccc;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
ul.tab-buttons li.selected3:hover { background: #00E0E0 }
/*END TAB MENU THREE*/
ul.tab-buttons li.selected4 {
    background: #21bb9d;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
ul.tab-buttons li.selected4:hover { background: #30CCAE }
/*END TAB MENU FOUR*/
ul.tab-buttons li.selected5 {
    background: #09afdf;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
ul.tab-buttons li.selected5:hover { background: #20C6F6 }
/*END TAB MENU FIVE*/
ul.tab-buttons li.selected6 {
    background: #F7AD17 none repeat scroll 0 0;
    margin-right: 0;
    transition: all 0.4s ease 0s;
}
ul.tab-buttons li.selected6:hover { background: #FFBC34 }
/*END TAB MENU SIX*/
/*END TAB MENU*/
/*START TAB CONTAINER*/
.tab-container {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e8e8e9;
    box-shadow: 0 11px 10px 0 rgba(0, 0, 0, 0.1);
    height: 100%;
    margin-bottom: 30px;
    padding: 20px;
}
.tab-container > div { display: none }
.tab-buttons li span {
    display: block;
    color: #fff;
    font-family: "Berkshire Swash",sans-serif;
}
.tab-buttons li a i {
    color: #fff;
    display: block;
    font-size: 36px;
    margin: 30px auto 5px;
}
.tab-buttons li a {
    display: block;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
}
.tab-buttons li a:hover { color: #fff }
/*02.END TAB MENU DESIGN*/
/*03.START ABOUT ME DESIGN*/
.about { padding: 60px 0 }
.about_title {
    border-bottom: 1px solid #e8e8e9;
    margin-bottom: 30px;
    padding-bottom: 10px;
    text-transform: uppercase;
}
.about_me h3 { text-transform: uppercase }
.about_me h5 {
    color: #ff2b42;
    margin-bottom: 8px;
    margin-top: 13px;
}
.about_me img {
border-radius: 100px;
display: inline;
height: 100px;
margin-bottom: 20px;
width: 100px;
border: 4px solid #e8e8e9;
}
.about_me p { margin-bottom: 20px }
/*START SOCIAL PROFILE*/
.social-profile ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.social-profile ul li {
    display: inline-block;
    margin-right: 5px;
}
.social-profile ul li a i {
    border: medium none;
    border-radius: 50px;
    box-shadow: 0 11px 10px rgba(0, 0, 0, 0.1);
    color: #fff;
    font-size: 18px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    transition: all 0.4s ease 0s;
    width: 45px;
}
.social-profile ul li a i:hover {
    background: #ff2b42;
    color: #fff;
}
.facebook { background: #5D82D1 }
.twitter { background: #40BFF5 }
.linkedin { background: #238CC8 }
.google { background: #EB5E4C }
.skype { background: #00AFF0 }
/*END SOCIAL PROFILE*/
.about_info ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.about_info ul li { line-height: 42px }
.about_info ul li span {
    color: #333;
    font-family: "Berkshire Swash",sans-serif;
}
/*03.END ABOUT ME DESIGN*/
/* 04.START PROGRESS BAR DESIGN */
.my_skills { margin-top: 60px }
.progress-bar-text {
    color: #333;
    font-family: "Berkshire Swash",sans-serif;
    font-weight: 400;
    margin-bottom: 10px;
    text-transform: capitalize;
}
.progress-bar {
    background: #e8e8e9 none repeat scroll 0 0;
    box-shadow: 0 0 0;
    height: 4px;
    margin: 0 0 25px;
    position: relative;
    width: 100%;
}
.progress-bar > span {
    background: #FF2B42 none repeat scroll 0 0;
    display: block;
    height: 100%;
    width: 0;
}
/*04.END PROGRESS BAR DESIGN */
/*05.START WORK PROCESS DESIGN */
.work_process_mb0 h4 { margin-bottom: 0px }
.single_process { padding: 40px 20px }
.single_process h4 {
    color: #fff;
    padding-bottom: 10px;
}
.single_process p {
    color: #fff;
    margin-bottom: 0;
}
/*05.END WORK PROCESS DESIGN */
/*06.START TESTIMONIAL DESIGN*/
.testimonial-section { margin-bottom: 60px }
.testimonial_overlay {
    background: rgba(0,0,0,0.4) none repeat scroll 0 0;
    overflow: hidden;
    padding: 60px 0;
}
.testimonial_single {
    background: rgba(0,0,0,0.7) none repeat scroll 0 0;
    padding: 30px;
}
.single_testimonial { padding: 20px 30px }
.cover-container img { display: inline }
.testimonial-image {
    border-radius: 500px;
    height: 80px;
    width: 80px;
    border: 5px solid #ff2b42;
}
.testomonial_left {
    float: left;
    margin-right: 20px;
}
.testomonial_left h4 {
    margin: 10px 0;
    color: #fff;
}
.testimonial_text {
    text-align: justify;
    color: #fff;
}
/*06.END TESTIMONIAL DESIGN*/
/*07.START MY SERVICE DESIGN*/
.my_service { padding-top: 30px }
.single_service {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e8e8e9;
    box-shadow: 0 11px 10px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 60px;
    padding: 20px;
    transition: all 0.4s ease 0s;
}
.single_service:hover { transform: translate3d(0px,-15px,0px) }
.single_service i {
    background: #fff none repeat scroll 0 0;
    border-radius: 100px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #333;
    display: inline-block;
    font-size: 24px;
    height: 60px;
    margin-bottom: 20px;
    padding: 17px 18px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 60px;
}
.single_service:hover i {
    color: #ff2b42;
    : ;
}
.single_service h4 {
    color: #fff;
    transition: all 0.4s ease 0s;
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
}
.single_service p { color: #fff }
.single_service_one { background: #ff2b42 }
.single_service_two { background: #1cbac8 }
.single_service_three { background: #00cccc }
.single_service_four { background: #21bb9d }
.single_service_five { background: #09afdf }
.single_service_six { background: #F7AD17 }
/*07.END MY SERVICE DESIGN*/
/*08.START PRICING TABLE DESIGN*/
.pricing-section {
    background: #f6f6f6 none repeat scroll 0 0;
    padding-bottom: 60px;
}
.pricing-tables .plan.first {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}
.pricing-tables .plan.last {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}
.pricing-tables .plan.recommended {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.pricing-tables .plan.recommended .head {
    margin-bottom: 20px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.plan {
    background: #fff none repeat scroll 0 0;
    border-radius: 4px;
    min-height: 100px;
    padding-bottom: 25px;
    transition: 0.4s;
}
.plan:hover { transform: translate3d(0px,-15px,0px) }
.plan .head {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 12px 16px;
    background: #FF2B42;
    color: #fff;
}
.plan .head h1,
.plan .head h4,
.plan .head h3 {
    color: #fff;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}
.plan > p { padding: 0 15px }
.plan .price {
    border-top: 1px solid #eee;
    margin: 0 auto 30px auto;
    width: 80%;
}
.plan .price h3 {
    font-size: 82px;
    vertical-align: top;
    line-height: 1;
}
.plan .price h3 span {
    font-size: 38px;
    vertical-align: top;
    position: relative;
    margin: 6px 0 0 -7px;
    display: inline-block;
}
.plan .price h4 {
    color: #aaa;
    font-size: 14px;
}
.plan .btn {
    padding: 10px 30px;
    text-transform: uppercase;
    background: #1cbac8;
    border-radius: 0;
    border: 1px solid #1cbac8;
}
.plan ul {
    list-style-type: none;
    padding: 20px;
    margin-top: 2px;
}
.plan ul li {
    line-height: 22px;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 400;
}
.plan ul li a {
    text-decoration: underline;
    color: #e6e9ed;
}
.plan ul li:last-child { border-bottom: none }
.plan ul strong { font-weight: 700 }
.plan.recommended {
    margin-top: 6px;
    box-shadow: 0 0 22px rgba(10, 10, 10, 0.42);
    position: relative;
    z-index: 99;
    border-radius: 4px;
}
.plan.recommended .head {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: #171717;
}
.plan.recommended .btn { margin-bottom: 10px }
/*08.END PRICING TABLE DESIGN*/
/*09.START COUNT DOWN DESIGN*/
.counter_timer { margin-bottom: 60px }
.counter { padding: 80px 0 }
.counter_color_one { background: #FF2B42 }
.counter_color_two { background: #FC394E }
.counter_color_three { background: #FD4559 }
.counter_color_four { background: #FC5466 }
.counter_color_four { background: #FC5466 }
.counter span {
    background: #fff none repeat scroll 0 0;
    display: block;
    height: 2px;
    margin: 15px auto;
    width: 60px;
}
.counter h2 {
    color: #fff;
    font-weight: 700;
}
.counter p {
    text-transform: capitalize;
    font-size: 18px;
    color: #fff;
}
/*09.END COUNT DOWN DESIGN*/
.timeline_area { margin-bottom: 30px }
/*10.START PORTFOLIO DESIGN*/
.portfolios { overflow: hidden }
.portfolio-filters { margin-bottom: 40px }
.portfolio-filters li.active { color: #FF2B42 }
.portfolio-filters li {
    border: 1px solid #e8e8e9;
    cursor: pointer;
    display: inline-block;
    font-family: "Montserrat",sans-serif;
    font-size: 14px;
    margin-right: 5px;
    padding: 8px 20px;
    text-transform: uppercase;
    transition: all 0.4s ease 0s;
}
@media only screen and (max-width:360px) { 
    .portfolio-filters li { margin-bottom: 10px }
}
.portfolio-filters li:hover { color: #FF2B42 }
.grid .mix {
    display: none;
    opacity: 0;
    filter: alpha(opacity=0);
}
.image-wrapper { position: relative }
.image-wrapper img {
    width: 100% !important;
    height: auto;
}
.image-overlay {
    background: rgba(255,43,66, 0.6) none repeat scroll 0 0;
    position: absolute;
    text-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.image-overlay span a {
    color: #fff;
    font-weight: 600;
    left: 33%;
    position: absolute;
    text-transform: uppercase;
    top: 48%;
}
.image-wrapper:hover .image-overlay {
    opacity: 1;
    filter: alpha(opacity=100);
}
.portfolio_btn { padding: 40px 0 }
.portfolio_btn a { border: medium none }
/*10.END PORTFOLIO DESIGN*/
/*11.START BLOG DESIGN*/
.my_blog {
    background: #f1f1f1 none repeat scroll 0 0;
    margin-bottom: 60px;
}
.single_blog {
    background: #fff none repeat scroll 0 0;
    padding: 10px;
    margin-bottom: 60px;
}
.single_blog_title {
    border-bottom: 1px solid #e8e8e9;
    padding-bottom: 10px;
}
.single_blog_title img {
    border: 7px solid #f0f0f0;
    border-radius: 100px;
    height: 80px;
    width: 80px;
}
.single_blog_title h5 {
    padding-top: 15px;
    color: #333;
}
@media only screen and (max-width:768px) { 
    .single_blog_title h5 { font-size: 12px }
}
.single_blog_title h5 a { color: #333 }
.single_blog_title a strong {
    font-size: 18px;
    -webkit-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
}
.single_blog_title a strong:hover { color: #ff2b42 }
.single_blog_title p { }
.single_blog_content h4 {
    color: #333;
    font-weight: 700;
    line-height: 26px;
    margin-top: 10px;
    text-transform: capitalize;
    transition: all 0.6s ease 0s;
    margin-bottom: 0;
}
.single_blog_content img { padding-top: 10px }
.single_blog_content h4:hover { color: #ff2b42 }
.single_blog_content p { }
.single_blog_comment {
    border-top: 1px solid #e8e8e9;
    padding-top: 10px;
    overflow: hidden;
}
.single_blog_comment i {
    color: #ff2b42;
    margin-right: 10px;
}
.comment { margin-left: 90px }
@media only screen and (max-width:768px) { 
    .comment { margin-left: 30px }
}
@media only screen and (max-width:480px) { 
    .comment { margin-left: 130px }
}
@media only screen and (max-width:360px) { 
    .comment { margin-left: 80px }
}
@media only screen and (max-width:320px) { 
    .comment { margin-left: 65px }
}
.single_blog img { display: inline }
/*START PAGINATION*/
ul.blog_pagination li a {
    border: 1px solid #e8e8e9;
    border-radius: 0 !important;
    color: #333;
    font-size: 18px;
    height: 40px;
    margin: 5px;
    padding: 6px 14px;
    width: 40px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
ul.blog_pagination li a:hover {
    color: #fff;
    background: #FF2B42;
    border: 1px solid #FF2B42;
}
/*END PAGINATION*/
/*11.END BLOG DESIGN*/
/*12.START CONTACT ADDRESS DESIGN*/
.contact_from { margin: 60px 0 }
.contact_address {
    border: 1px solid #e8e8e9;
    box-shadow: 0 11px 10px 0 rgba(0, 0, 0, 0.1);
    padding: 20px 10px;
    transition: all 0.3s ease 0s;
}
.contact_address:hover { transform: translate3d(0px,-15px,0px) }
.contact_address i {
    background: #fff none repeat scroll 0 0;
    border-radius: 100px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #333;
    display: inline-block;
    font-size: 24px;
    height: 60px;
    margin-bottom: 0;
    padding: 18px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 60px;
}
.contact_address h4 {
    color: #fff;
    margin: 20px 0;
    text-transform: uppercase;
}
.contact_address p {
    margin-bottom: 0;
    color: #fff;
}
.contact_address_one { background: #f7ad17 }
.contact_address_two { background: #00cccc }
.contact_address_three { background: #21bb9d }
/*12.END CONTACT ADDRESS DESIGN*/
/*13.START CONTACT FORM DESIGN*/
.contact_title {
    border-bottom: 1px solid #e8e8e9;
    margin-bottom: 40px;
    padding: 10px 0;
    text-transform: uppercase;
}
.form-control {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #e8e8e9;
    border-radius: 0;
    box-shadow: none;
    color: #333;
    font-size: 16px;
    height: 45px;
}
.form-control:hover,
.form-control:focus {
    border: 1px solid #FC5466;
    box-shadow: none;
    outline: 0 none;
}
.form-group .actions input {
    border: medium none;
    transition: all 0.3s ease 0s;
}
.form-group .actions input:hover { background: #FC5466 }
/*13.END CONTACT FORM DESIGN*/
/*14.START MAP DESIGN*/
.map iframe {
    height: 300px;
    width: 100%;
    border: 0;
}
/*14.END MAP DESIGN*/
/*15.START FOOTER DESIGN*/
.footer p {
    border-top: 1px solid #ddd;
    font-family: "Montserrat",sans-serif;
    margin-bottom: 0;
    padding: 20px 0;
    text-transform: capitalize;
}
/*15.END FOOTER DESIGN*/