/*-----------------------------------------------------------------------------------

    Template Name: The Smak Media
    Template URI: http://www;
    Description: This is html5 template
    Author: BDExpert
    Author URI: http://quomodotheme.com
    Version: 1.0

-----------------------------------------------------------------------------------    
    CSS INDEX
    ===================
    1. Google font
	2. Theme Default CSS
    3. Helper-class
    4. Overright-css
    5. Page-title
    6. Social-menu-style
    7. Section-background
    8. scroll-down-icon
    9. Mainmenu-area
    10. Work-area
    11. Count-Down
    12. Team-area
    13. Subscribe-form
    14. Price-Style
    15. Blog-style
    16. Footer-style
    17. Scrollup-button
    18. Contact-form
-----------------------------------------------------------------------------------*/


/*-----------------
1. Google font
------------------*/

@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise');

/*-------------------
2. Theme Default CSS
--------------------*/
body {
    font-family: 'Quicksand', sans-serif;
    overflow-x: hidden;
}
a {
    text-decoration: none;
    outline: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    color: #555555;
}

input:focus,
button:focus,
a:focus,
a:hover,
li.active > a {
    text-decoration: none;
    outline: none;
    color: #fff; /* mainmenu base hover color change by me(Agnel) #ce953c */
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 10px;
    font-weight: 600;
}

h1 {
    font-size: 40px;
}

p span,
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
    color: #fff; /* mainmenu base hover color change by me(Agnel) #ce953c */
}

html,
body {
    height: 100%
}

body {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.8;
    color: #202020;
}


/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}


/*------------------
3. Helper-class
--------------------*/

.alignleft {
    float: left;
    margin-right: 15px;
}

.alignright {
    float: right;
    margin-left: 15px;
}

.aligncenter {
    display: block;
    margin: 0 auto 15px;
}

.fix {
    overflow: hidden;
}

.relative {
    position: relative;
}

.absolute-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.vcenter {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.golden {
    color: #fff; /* mainmenu base hover color change by me(Agnel) #ce953c */
}

.text-white a,
.text-white {
    color: #070707;
}
.bottom {
	position: absolute;
	bottom: 3%;
	right: 10%;
}
.text-white a:hover {
    color: #333
}

.text-gray {
    color: #555555;
}

.title-lg {
    font-size: 60px;
}

.title-mg {
    font-size: 40px;
}

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

a.read-more {
    display: inline-block;
}

a.read-more::after {
    content: "\f178";
    display: inline-block;
    font-family: fontawesome;
    margin-left: 0;
    opacity: 0;
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

a.read-more:hover::after {
    opacity: 1;
    padding-left: 10px;
}

section.pad80 {
    padding: 80px 0;
    /*height: 100vh;*/
}

.black-bg {
    background-color: #000000;
}

.dark-bg {
    background-color: #111111;
}

.gray-bg {
    background-color: #ebebeb;
}
.color-white {
    background-color: rgba(242,243,243,1);
    /*background: rgba(0,0,0,.7);*/
}
.color-crims {
    background-image: url('images/bg-grid.png');
    /*background-color: #28409a;*/
    /*background: rgba(0,0,0,.7);*/
    background-color: #f97242;
}
.color-orange {
    background-image: url('images/bg-grid.png');
    /*background-color: #28409a;*/
    /*background: rgba(0,0,0,.7);*/
    background-color: #ff943b;
}
.color-green {
    background-image: url('images/bg-grid.png');
    /*background-color: #28409a;*/
    /*background: rgba(0,0,0,.7);*/
    background-color: #00cc99;
}
.color-blue {
    background-image: url('images/bg-grid.png');
    background-color: #28409a;
    /*background: rgba(0,0,0,.7);*/
}
.smoth.logo .custom-logo-link {
    position: absolute;
    top: -25px;
}
.smoth.logo .custom-logo-link {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -0-transition: 0.3s;
    transition: 0.3s;
}
.smoth.logo.sticky .custom-logo-link,
.smoth.logo.sticky .custom-logo {
    width: 100px;
    height: auto;
}
p.basic-text {
    text-align: center;
    font-size: 18px;
    font-weight: normal;
}
p.basic-small {
    font-size: 16px;
}
h2.home-head {
    font-size: 70px;
    font-weight: lighter;
    text-align: center;
}
.text-white {
    color: #fff;
    
}
.text-blue {
    color: #02215a;

}
.justify {
    text-align: justify;
}
.bold {
    font-weight: bold;
}
.img-icon {
    display: block;
    text-align: right;
}
img.about-logo {
    display: inline-block;

}
ul.our-services {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 17px;
    text-transform: uppercase;
    
}
ul.our-services li {
    padding: 20px 0;    
}
ul.our-services li img {
    text-align: center;
    display: block;
    margin: 10px auto;
}
ul.our-services li a {
    color: #fff;
}
ul.our-services li a:hover {
    color: #fff;
    /*font-weight: bold;*/
    font-style: italic;
}
ul#featured-links {
    list-style: none;
    color: #fff;
    padding: 0;
    margin: 30px 30px 0 165px;
}
ul#featured-links li {
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid #8e8989;
    padding: 5px 0 5px 18px;
}
ul#featured-links li a {
    font-size: 14px;
    color: #fff;
    margin: 0;
    padding-left: 0;
    display: inline-block;
    float: left;
}
ul#featured-links #social-icons {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
    line-height: 0;
}
ul#featured-links #social-icons li {
    border: none;
    float: left;
    display: inline-block;
    width: inherit;  
}
ul#featured-links #social-icons li a {
    color: #818181;
}
ul#featured-links #social-icons li a:hover {
    color: #fff;
}

ul#featured-links .home-text,
ul#featured-links .home-email {
    border:none;
}
.no-pad {
    padding: 0;
    position: relative;
}
ul#featured-links input#submit {
    float: right;
    display: inline-block;
    width: 10%;
    position: absolute;
    right: 0;
    top: 8px;
    overflow: hidden;
    background: none;
    border: none;
    outline: none;
    text-indent: -200px;
    box-shadow: none;
    background-image: url('images/submit-arrow.png');
    background-repeat: no-repeat;
    background-position: bottom center;
}


/*----------------------
4. Overright-css
-----------------------*/


/*-----------------
8. scroll-down-icon
-------------------*/

.scroll-down-icon {
    bottom: 10px;
    right: 5%;
    position: absolute;
    z-index: 2;
    border: 1px solid #070707;
    border-radius: 3px;
}

.scroll-down-icon.text-white a {
    -webkit-animation: scroll_down 2s linear 2s infinite alternate;
    animation: scroll_down 2s linear 2s infinite alternate;
    box-sizing: border-box;
    display: block;
    height: 80px;
    padding-top: 5px;
    text-align: center;
    width: 20px;
    font-size: 18px;
}

@-webkit-keyframes scroll_down {
    0% {
        padding-top: 5px;
    }
    50% {
        padding-top: 30px
    }
    100% {
        padding-top: 5px
    }
}

@keyframes scroll_down {
    0% {
        padding-top: 5px;
    }
    50% {
        padding-top: 30px
    }
    100% {
        padding-top: 5px
    }
}

/*----------------------
9. Mainmenu-area
------------------------*/
/*.mainmenu-area {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: 100%;
    text-align: right;
    color: #fff;
}*/

.mainmenu-area {
    left: 0;
    padding-top: 20px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.mainmenu-area.sticky {
    position: fixed;
    background: #000000;
    padding-top: 5px;
    padding-bottom: 5px;
}

.mainmenu {
    background-color: #000000;
    display: inline-block;
    float: right;
    min-width: 150px;
    padding: 0 10px;
    position: absolute;
    top: 0;
    right: 0;
}

.mainmenu.sticky {
    position: fixed;
}

.menu-toggle-box {
    display: block;
    padding: 10px 40px 10px 10px;
    width: 100%;
    color: #ffffff;
    height: 50px;
    text-transform: uppercase;
}

.menu-toggle-box .menu-icon {
    height: 22px;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30px;
}

.menu-toggle-box .menu-icon span {
    background-color: #ffffff;
    display: block;
    height: 2px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
    left: 0;
    width: 100%;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.menu-toggle-box .menu-icon span:nth-child(1) {
    margin-top: -10px;
}

.menu-toggle-box .menu-icon span:nth-child(3) {
    margin-top: 10px;
}

.menu-toggle-box[aria-expanded="true"] .menu-icon span:nth-child(1) {
    margin-top: 0;
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
}

.menu-toggle-box[aria-expanded="true"] .menu-icon span:nth-child(2) {
    left: 100%;
    opacity: 0;
}

.menu-toggle-box[aria-expanded="true"] .menu-icon span:nth-child(3) {
    margin-top: 0;
    -webkit-transform: translateY(-50%) rotate(045deg);
    transform: translateY(-50%) rotate(45deg);
}

.menu-toggle-box[aria-expanded="true"] {
    color: #fff; /* mainmenu base hover color change by me(Agnel) #ce953c */
}

#mainmenu li.active a {
    cursor: auto;
}

#mainmenu li a {
    text-transform: uppercase;
}

.sidenav .smak-watermark {
    background-image: url(images/smakmedia-watermark.png);
    background-repeat: no-repeat;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -0-transform: rotate(270deg);
    transform: rotate(270deg);
    display: inline-block;
    width: 100%;
    height: 84px;
    position: absolute;
    left: -300px;
    top: 35%;
    opacity: 0.1;
    filter: alpha(opacity=10);
}
.sidenav {
    height: 100%;
    width: 750px;
    max-width: 100%;
    position: fixed;
    z-index: 99;
    top: 0;
    left: -750px;
    background-color: #2c2929;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 10px;
    -webkit-transition: width 2s; 
    -moz-transition: width 2s; 
    -0-transition: width 2s; 
    transition: width 2s; 
    /*background-image: url('images/bg-grid.png');*/
}
#overlay,
#cover {
    -webkit-transition: width 2s; 
    -moz-transition: width 2s; 
    -0-transition: width 2s; 
    transition: width 2s; 
    -webkit-transition-delay: 1s; 
    -moz-transition-delay: 1s; 
    -0-transition-delay: 1s; 
    transition-delay: 1s;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    font-weight: lighter;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
#cover {
    position: fixed;
    background: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    z-index: 9;
    display: none;
}

 .menu-toggle-box.sticky .menu-icon {
   top: 60%; 
 }
.menu-toggle-box.relative.sticky {
    position: fixed;
    top: 50%;
    left: 0;
    color: #000;
    width: inherit;
    background:rgba(256, 256, 256, 1);
    display: inline-block;
    height: 200px;
    /*box-shadow: 1px 1px 10px rgba(0,0,0,.2);*/
    padding: 39px;
    text-indent: -2000px;
 }
.menu-toggle-box.relative.sticky:hover {
    padding-left: 125px;
}
.menu-toggle-box.sticky .menu-icon span {
    background-color: #000;
}
.menu-toggle-box.sticky .menu-icon {
    right: 40px;
}
.menu-toggle-box #menu-logo {
    display: none;
}
.menu-toggle-box.sticky #menu-logo {
    width: 65px;
    position: absolute;
    top: -80px;
    left: -27px;
    display: inline-block;
}
#menu-logo img {
    width: 100%;
    height: auto;
    position: absolute;
    left: 11px;
}

ul#mainmenu {
    margin-left: 165px;
    margin-right: 30px;
}
ul#mainmenu li {
    border-bottom: 1px solid #2c2929;
}
ul#mainmenu li.current-menu-item {
    border-bottom: 1px solid #8e8989;
}
ul#mainmenu li:hover {
    border-bottom: 1px solid #8e8989;

}
ul#mainmenu li.current-menu-item a {
    color: #fff;
    font-weight: 100;
}
.nav>li>a:focus, .nav>li>a:hover {
    color: #fff;
    background: none !important;
}
a#close-menu {
    text-align: right;
    margin-right: 18px;
    margin-bottom: 30px;
    font-size: 20px;
    color: #fff;
}

/*----------------------
Form
------------------------*/

.form-control.home-text,
.form-control.home-phone,
.form-control.home-email,
.form-control.home-textarea {
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
    border-bottom: 1px solid #fff;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 0;
    color: #fff;
}
#req-quote .form-control.home-text,
#req-quote .form-control.home-phone,
#req-quote .form-control.home-email,
#req-quote .form-control.home-textarea {
    background: #2c2929;
}
textarea#requirements {
    height: 100px;
}
select {
    cursor: pointer;
}
#home-form .col-md-6,
#home-form .col-md-12 {
    position: relative;
    font-size: 18px; 
}
#home-form .col-md-6 span.text,
#home-form .col-md-6 label,
#home-form .col-md-12 span.text,
#home-form .col-md-12 label {
    position: absolute;
    top: 0;
    left: 17px;
    font-size: 15px;
    font-weight: lighter;
}
.home-submit {
    background: #fff;
    color: #28409a;
    font-size: 20px;
    padding: 10px 50px;
}
#home-form a {
    color: #ccc;
}

/*form errors*/
span.wpcf7-not-valid-tip {
    /*color: #fff !important;*/
    font-size: 10px !important;
    /*position: absolute !important;*/
    display: inline-table !important;
    /*right: 0 !important;*/
    /*top: 0 !important;*/
}

/*----------------------
9. Portfolio
------------------------*/
ul#cnFilterOptions li a:hover,
ul#cnFilterOptions li.active a {
    color: #fff !important;
    /*text-decoration: underline !important;*/
}
ul#cnFilterOptions li a {
    border:1px solid #28409a;
}
ul#cnFilterOptions li a:hover,
ul#cnFilterOptions li.active {
    border: 1px solid #fff !important;
}
#cnfolioHolder ul li {
    /*margin: 0 !important;*/
}
ul.cnOurHolder li.item .cnportfolio-image {
    max-height: 208px;
}
#cnfolioHolder ul.cnOurHolder {
    background:#fff;
}
#cnFilterOptions {
    text-align: center;
}
ul#cnFilterOptions li {
    background: none !important;
    border:none !important;
}


.header-new {
    position: relative;
}
.logo-portion {
    background: #28409a;
    width: 25%;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}
.logo-portion img {
    float: right;
    margin: 10px 35px 10px 0;
}
.logo-portion::before,
.navigation-portion::after {
     content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    z-index: -1;
    bottom: 0;
    transform-origin: left bottom;
    transform: skew(-45deg) ;
    -webkit-transform: skew(-45deg) ;
    -moz-transform: skew(-45deg) ;
    -o-transform: skew(-45deg) ;
    -ms-transform: skew(-45deg) ;
}
.navigation-portion::after {
    right: 100px;
}
.navigation-portion {
    width: 65%;
    background: #28409a;
    float: right;
    z-index: 1;
    position: absolute;
    bottom: 0;
    right: 0;

}
.navigation-portion.fixed {
    position: fixed;
    top: 0;
    bottom: inherit;
    width: 100%;
}
ul#mainmenu-new {
    float: left;
}

ul#mainmenu-new li {
    float: left;
}

ul#mainmenu-new li a {
    color: #fff;
    font-size: 20px;
    font-weight: lighter;
    padding: 16px 40px;
}
ul#mainmenu-new li a:hover {
    text-decoration: underline;

}
.navigation-portion img.logo-visible {
    display: none;
}
.navigation-portion.fixed img.logo-visible {
    display: inline-block;
    float: left;
    margin: 17px 2%;
}
.navigation-portion.fixed ul#social-icons {
    float: right;
}
ul#social-icons {
    list-style: none;
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul#social-icons li {
    float: left;
}

ul#social-icons li a {
    color: #fff;
    font-size: 20px;
    font-weight: lighter;
    padding: 16px 40px 10px 40px;
    display: inherit;
}
.page-bg-image {
    background: yellow;
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
}
#innerpage {
    padding: 75px 0;
}
#innerpage p {
    text-align: justify; 
    font-size: 17px;
}
.page-bg-image h1 {
    text-align: center;
    color: #fff;
    font-size: 5em;
    text-shadow: 2px 2px 1px #000;
    margin: inherit;
}
#close-mainmenu {
    display: none;
}
.header-center {
    background: rgba(0,0,0,0.5);
    padding: 141px 0;

}
p#breadcrumbs {
    text-align: center;
    color: #fff;
    font-size: 18px;
    background: rgba(21,21,21,.5);
}
p#breadcrumbs a {
    color: #00a1fd;
}
footer {
    background: #232323;
    padding: 0;
    color: #747474;
}
section#lets-talk {
    background-image: url('images/lets-talk.jpg');
    background-size: cover; 
    color: #fff;
    text-align: center;
    padding: 60px 0;
    margin-bottom: 30px;
    /*font-family: 'Waiting for the Sunrise', cursive;*/
    position: relative;
}
section#lets-talk .container:before {
    background: url(images/down-arrow01.png) no-repeat center top;
    content: "";
    display: block;
    height: 68px;
    left: 48%;
    position: absolute;
    top: -36px;
    width: 68px;
}
ul#talk-options {
    float: left;
    padding: 0;
    list-style: none;
    width: 100%;
}
ul#talk-options li {
    float: left;
    font-size: 20px;
    max-width: 100%;
}
ul#talk-options li a {
    color: #fff;
}
ul#talk-options li i {
    font-size: 80px;
    color: #fff;
    padding: 27px;
    width: 100%;
}
ul#talk-options li span {
    float: left;
    width: 100%;
}

footer .left-align {
    float: left;
    text-align: left;

}
footer .center-align {
    float: center;
    text-align: center;
}
footer .center-align img {
    margin-bottom: 15px;
}
footer .right-align {
    float: right;
    text-align: right;
}
footer .right-align a {
    color: #747474;
    text-decoration: underline;
}
ul#foo-social-icons {
    padding: 0;
    list-style: none;
    margin: 0 auto;
    display: table;
}
ul#foo-social-icons li {
    float: left;
    margin: 0 5px;
}
ul#foo-social-icons li a {
    background: #fff;
    padding: 7px 11px;
    font-size: 14px;
    color: #232323;
    border: 1px solid #fff;
}
ul#foo-social-icons li a:hover {
    color: #fff;
    background: #232323;
    border: 1px dashed #fff;
}
ul#sidebar-menu,
ul.sub-menu {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.sub-menu {
    /*display: none;*/
}
ul#sidebar-menu li {
    
}
ul#sidebar-menu li a {
    background: #28409a;
    width: 100%;
    padding: 10px;
    display: block;
    color: #fff;
    margin: 2px 0;
    font-weight: bolder;
}
ul#sidebar-menu li > ul li a {
    text-indent: 10px;
    font-weight: normal;
}
ul#sidebar-menu li > ul li a:before {
    content: "- ";
}
ul#sidebar-menu li > ul li > ul li a:before {
    content: "- - ";
}
div#innerpage h2 {
    font-weight: normal;
    text-decoration: none;
    margin: 10px 0;
    text-transform: uppercase;
}

div#req-quote {
    margin: 30px 30px 0 165px;
    color: #fff;
}
div#req-quote hr {
    border: 1px solid rgba(255,255,255,0.1);
}

.quote {
    background: #28409a;
    color: #fff;
    text-align: center !important;
    padding: 30px;
}
.quote h3 {
    font-size: 3em;
    font-weight: lighter;
}
.quote p {
    text-align: center !important;
}
.quote a {
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    margin: 0 auto;
    display: table;
    color: #28409a;
    font-weight: bolder;
}
#innerpage ul.innerpg li {
    text-align: justify;
}
#innerpage ul.innerpg {
    font-size: 17px;
    padding: 0;
}

.menu-responsive {
     display: none; 
    color: #fff;
    font-size: 33px;
    padding: 0 0 0 30px;
    float: left;
}