/*********************************************************************************************
Project:      Weddaan - Responsive HTML Portfolio Template
Version:      1.7
Last change:  22/03/2017

Style Index

1.  Color Codes
2.  Defaults & Reset & Global elements
3.  Nav
4.  About Page
5.  Portfolio Page
6.  Blog Page
7.  Contact Page
8.  Post Page
9.  Wrong Page
10.  Footer
11. Scroll To Top
12. Loading Screen
13. ***** Responsive *****
    1. Large Screen
    2. Medium Screen
    3. Small Screen
    4. Extra Small Screen
    5. Extra Extra Small Screen
    6. Screen Width 400px
*********************************************************************************************/

/*------------------------------------------------------------------------------------------*/
/* 1. Color Codes */
/*------------------------------------------------------------------------------------------

***** Background Color *****

[ About Me,
My Work,
Blog,
Contact Me ]       ===> #f6f6f6
[ Footer ]         ===> #2e343f

***** Text Color *****

[ Nav,
About Me,
My Work,
Blog,
Contact Me ]  ===> #2e343f
[ Footer ]    ===> #aaa
[ Footer Headings (h4) ]    ===> #ccc


/*------------------------------------------------------------------------------------------*/
/* 2. Defaults & Reset & Global elements */
/*------------------------------------------------------------------------------------------*/
* {
    box-sizing: border-box
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

a {
    color: inherit;
    text-decoration: none
}

.clearfix {
    clear: both
}

.container {
    margin-left: auto;
    margin-right: auto
}

.Scroll-To-Top,
a,
i:before,
li {
    -webkit-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out
}

::-webkit-scrollbar {
    display: none
}

body {
    background-color: #f6f6f6;
    color: #2e343f;
    font-family: 'Open Sans', sans-serif;
    padding-top: 50px
}

/*------------------------------------------------------------------------------------------*/
/* 3. Nav */
/*------------------------------------------------------------------------------------------*/
nav {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 6000;
    width: 100%;
    background-color: #2e343f;
    color: #fff;
    padding: 0 20px;
    box-shadow: 0px 0px 3px #000;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.nav-fixed {
    top: 0
}

.nav-default {
    top: -60px
}

nav a.logo,
nav ul li {
    float: left
}

nav a.logo,
nav ul li a {
    height: 50px;
    padding: 0 5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

nav ul {
    float: right
}

nav ul li a {
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
    margin: 0 5px;
    -webkit-transition: none;
    transition: none
}

nav ul li .active,
nav ul li a:hover {
    color: #ff2b42
}

div.mobile-menu-button {
    float: right;
    height: 50px;
    width: 50px;
    display: none;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

div.mobile-menu-button i {
    cursor: pointer
}

div.mobile-menu-button i:hover {
    color: #ff2b42
}

div.mobile-menu-body {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7000;
    height: 100%;
    width: 100%;
    background-color: rgba(53, 60, 72, .9);
    display: none;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

div.mobile-menu-body i {
    position: absolute;
    top: 15px;
    right: 30px;
    color: #ff2b42;
    font-size: 30px;
    cursor: pointer
}

div.mobile-menu-body i:hover {
    color: #df273b
}

div.mobile-menu-body div {
    width: 100%;
    color: #fff;
    text-align: center;
    text-transform: capitalize;
    font-size: 18px
}

div.mobile-menu-body div a {
    display: inline-block;
    padding: 8px
}

div.mobile-menu-body div a:hover {
    color: #ff2b42
}

/*------------------------------------------------------------------------------------------*/
/* 4. About Page */
/*------------------------------------------------------------------------------------------*/
.about-me,
.my-work,
.blog,
.contact-me,
.post-page,
.wrong-page {
    padding: 60px 0
}

h1.heading {
    color: #2e343f;
    text-align: center;
    text-transform: capitalize;
    margin-bottom: 50px
}

h1.heading span {
    display: inline-block;
    padding: 0 10px 10px;
    border-bottom: 3px solid #ff2b42
}

div.about-me .about-photo,
.post-page .post-img {
    background-color: #f0f0f0;
    margin: 0 15px 30px;
    border: 2px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 1px #ddd
}

div.about-me .about-photo img,
.post-page .post-img img {
    display: block;
    width: 100%
}

div.about-me .about-text p,
.post-page .post-img-and-text p {
    color: #555;
    font-size: 14px;
    margin: 10px 15px 40px
}

div.about-me .about-text a {
    display: block;
    width: 300px;
    background-color: #ff2b42;
    color: #fff;
    text-align: center;
    font-size: 14px;
    text-transform: capitalize;
    padding: 8px 10px;
    margin: 15px auto;
    border: none;
    outline: 0;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 5px -1px #222
}

div.about-me .about-text a:last-of-type {
    background-color: #2e343f
}

div.about-me .about-text .hvr-bounce-to-right:before {
    background-color: #de001a;
    border-radius: 4px
}

div.about-me .about-text .hvr-bounce-to-right:last-of-type:before {
    background-color: #555
}

/*------------------------------------------------------------------------------------------*/
/* 5. Portfolio Page */
/*------------------------------------------------------------------------------------------*/
ul .hvr-underline-from-left {
    overflow: visible;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

ul .hvr-underline-from-left:before {
    bottom: -2px;
    background: #ff2b42;
    height: 2px
}

.my-work .my-work-menu ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 20px
}

.my-work .my-work-menu li {
    font-size: 14px;
    text-transform: capitalize;
    padding: 7px 5px;
    margin: 0 5px;
    border-bottom: 2px solid transparent;
    cursor: pointer
}

.my-work .my-work-menu li.active {
    color: #ff2b42;
    border: 0;
    border-bottom: 2px solid #ff2b42
}

.my-work .my-work-menu li:hover {
    color: #ff2b42
}

.my-work .my-work-content {
    margin-bottom: 30px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

#my-work-filtering .mix {
    visibility: hidden
}

.my-work .my-work-content .my-work-photo {
    margin: 3px;
    box-shadow: 0 0 5px #999
}

.my-work .my-work-content .my-work-photo:hover img {
    -webkit-transform: scale(1.15, 1.15) rotate(-5deg);
    -ms-transform: scale(1.15, 1.15) rotate(-5deg);
    transform: scale(1.15, 1.15) rotate(-5deg)
}

.my-work .my-work-content .my-work-photo a {
    height: 200px;
    width: 250px
}

.my-work .my-work-content .my-work-photo img {
    display: block;
    height: 100%;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.my-work .my-work-content .my-work-photo .overlay {
    background-color: rgba(46, 52, 63, .8);
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.my-work .my-work-photo .overlay h4,
.my-work .my-work-photo .overlay p {
    width: 100%
}

.my-work .my-work-photo .overlay h4 {
    margin: 0 0 5px 15%
}

.my-work .my-work-photo .overlay p {
    font-size: 12px;
    margin: 0 0 15% 15%
}

/*------------------------------------------------------------------------------------------*/
/* 6. Blog Page */
/*------------------------------------------------------------------------------------------*/
.blog p.small-description {
    color: #666;
    text-align: center;
    margin-bottom: 50px
}

.blog .blog-content {
    margin-bottom: 30px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.blog .blog-content .blog-post {
    width: 45%;
    background-color: #fff;
    margin: 25px 15px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 10px #ddd
}

.blog .blog-content .post-img {
    position: relative;
    overflow: hidden
}

.blog .blog-content .post-img img {
    display: block;
    width: 100%
}

.blog .blog-content .post-img a {
    position: absolute;
    top: -320px;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(46, 52, 63, .75);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.blog .blog-content .post-img a i {
    color: #fff;
    font-size: 40px;
    text-shadow: 0 0 5px #111
}

.blog .blog-content .post-img a,
.blog .blog-content .post-img img {
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.blog .blog-content .post-img:hover img {
    -webkit-transform: scale(1.15, 1.15) rotate(-5deg);
    -ms-transform: scale(1.15, 1.15) rotate(-5deg);
    transform: scale(1.15, 1.15) rotate(-5deg)
}

.blog .blog-content .post-img:hover a {
    top: 0
}

.blog .blog-content .post-text {
    position: relative;
    padding: 15px
}

.blog .blog-content .post-text i.fa-plus {
    position: absolute;
    top: -15px;
    right: 20px;
    height: 30px;
    width: 30px;
    background-color: #ff2b5b;
    color: #fff;
    font-size: 16px;
    border-radius: 50%;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.blog .blog-content .post-text i.fa-plus:hover {
    background-color: #f7557a
}

.blog .blog-content .post-text h4 {
    display: inline-block;
    text-transform: capitalize;
    margin: 0
}

.blog .blog-content .post-text p {
    color: #777;
    font-size: 14px;
    margin: 10px 0 25px
}

.blog .post-text .post-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.blog .post-text .post-footer a {
    background-color: #ff2b5b;
    color: #fff;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 3px
}

.blog .post-text .post-footer .hvr-bounce-to-right:before {
    background-color: #2e343f;
    border-radius: 4px
}

.blog .post-footer .social-media-statistics {
    float: right
}

.blog .post-footer .social-media-statistics div {
    display: inline-block;
    color: #777;
    font-size: 14px;
    margin-left: 10px
}

.blog .post-footer .social-media-statistics div span {
    font-size: 12px
}

.blog .pagination ul {
    text-align: center;
    font-size: 14px;
    margin: 5px;
    cursor: default
}

.blog .pagination ul li {
    display: inline-block
}

.blog .pagination ul li:first-of-type,
.blog .pagination ul li a {
    min-height: 30px;
    background-color: #fff;
    line-height: 30px;
    padding: 2px 10px 0px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 2px
}

.blog .pagination ul li a {
    display: block
}

.blog .pagination ul li a.active,
.blog .pagination ul li a:hover {
    background-color: #2e343f;
    color: #fff;
    border: 1px solid #2e343f
}

/*------------------------------------------------------------------------------------------*/
/* 7. Contact Page */
/*------------------------------------------------------------------------------------------*/
.contact-me form {
    width: 800px;
    margin: 0 auto
}

.contact-me form input,
.contact-me form textarea {
    width: 100%;
    background-color: #fff;
    color: #2e343f;
    font-size: 14px;
    padding: 10px;
    margin-bottom: 5px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    outline: 0
}

.contact-me form input:not([type=submit]):focus,
.contact-me form textarea:focus {
    border-color: #a8bcff
}

.contact-me form textarea {
    height: 200px;
    resize: vertical
}

.contact-me form input[type=submit] {
    min-width: 140px;
    background-color: mediumaquamarine;
    color: #fff;
    cursor: pointer
}

.contact-me form input[type=submit]:hover {
    background-color: #78d2b3
}

/*------------------------------------------------------------------------------------------*/
/* 8. Post Page */
/*------------------------------------------------------------------------------------------*/
.post-page {
    background-color: #fff
}

.post-page .heading {
    display: block;
    padding: 0 15px;
    margin-bottom: 15px
}

.post-page .heading h2 {
    text-align: left;
    font-size: 22px;
    margin: 0
}

.post-page .heading h2 i {
    color: #777;
    font-size: 15px;
    margin-right: 5px
}

.post-page .heading div span,
.post-page .related-posts li div span,
.post-page .members-comments li div span {
    color: #aaa;
    font-size: 12px
}

.post-page .heading div {
    margin: 0 15px
}

.post-page .heading div span {
    margin-right: 10px
}

.post-page .post-img-and-text {
    width: calc(100% - 375px);
    padding: 0 15px;
    margin-right: 25px
}

.post-page .post-img-and-text,
.post-page .related-posts {
    float: left
}

.post-page .related-posts {
    width: 350px;
    padding: 0 15px
}

.post-page .related-posts h3 {
    background-color: #eee;
    text-align: center;
    padding: 10px;
    margin: 0;
    border-radius: 5px 5px 0 0
}

.post-page .related-posts ul,
.post-page .members-comments {
    border: 1px solid #eee;
    border-radius: 0 0 5px 5px
}

.post-page .related-posts ul li,
.post-page .members-comments li {
    padding: 15px 0;
    margin: 0 15px;
    border-top: 1px solid #eee;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start
}

.post-page .related-posts ul li:first-of-type,
.post-page .members-comments li:first-of-type {
    border-top: none
}

.post-page .related-posts ul li img,
.post-page .members-comments li img {
    display: block;
    margin-right: 10px
}

.post-page .related-posts ul li h5,
.post-page .members-comments li h4 {
    color: #333;
    margin: 0
}

.post-page .related-posts ul li h5 a:hover,
.post-page .members-comments li h4 a:hover {
    color: #ff2b42
}

.post-page .comments-area {
    margin: 0 15px
}

.post-page .comments-area .share-buttons {
    cursor: default
}

.post-page .comments-area .share-buttons a {
    width: 75px;
    color: #fff;
    font-size: 12px;
    padding: 2px 3px;
    margin: 10px 2px;
    border-radius: 4px;
    display:-webkit-inline-box;
    display:-webkit-inline-flex;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.post-page .comments-area .share-buttons a i {
    font-size: 18px
}

.post-page .comments-area .share-buttons a:first-of-type {
    background-color: #3b5998
}

.post-page .comments-area .share-buttons a:nth-of-type(2) {
    background-color: #55acee
}

.post-page .comments-area .share-buttons a:last-of-type {
    background-color: #db4437
}

.comments-area .share-buttons .hvr-bounce-to-right:before {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px
}

.post-page .comments-area form textarea,
.post-page .comments-area form div {
    width: calc(100% - 20px);
    background-color: #eee;
    font-size: 12px;
    margin: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px
}

.post-page .comments-area form textarea,
.post-page .comments-area form input[type=submit] {
    display: block;
    color: #2e343f;
    padding: 8px 10px;
    outline: 0
}

.post-page .comments-area form textarea {
    height: 110px;
    resize: none
}

.post-page .comments-area form textarea:focus {
    background-color: #e8e8e8;
    border-color: #ccc
}

.post-page .comments-area form input[type=submit] {
    width: 100%;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer
}

.post-page .comments-area form input[type=submit]:hover {
    color: #fff
}

.post-page .comments-area form .hvr-bounce-to-right:before {
    background-color: rgba(46, 52, 63, 0.5);
    border-radius: 4px
}

.post-page .comments-area .members-comments {
    margin-top: 30px
}

.post-page .members-comments li.sub-comment {
    margin-left: 66px;
    border: none
}

.post-page .comments-area .members-comments h4 {
    margin-bottom: -4px
}

.post-page .comments-area .members-comments div {
    width: 100%
}

.post-page .comments-area .members-comments p {
    color: #555;
    font-size: 14px;
    margin-top: 5px
}

.post-page .members-comments form input {
    display: block;
    width: 100%;
    background-color: #f8f8f8;
    font-size: 12px;
    padding: 5px 8px;
    border: 1px solid #ddd;
    outline: none;
    border-radius: 5px
}

.post-page .members-comments form input:focus {
    background-color: #f4f4f4
}

/*------------------------------------------------------------------------------------------*/
/* 9. Wrong Page */
/*------------------------------------------------------------------------------------------*/
.wrong-page {
    min-height: 550px
}

.wrong-page h1.heading span {
    border: 0
}

.wrong-page .wrong-page-photo {
    text-align: center;
    margin: 0 15px 30px
}

.wrong-page .wrong-page-photo img {
    max-width: 600px;
    width: 100%
}

.wrong-page .wrong-page-text p {
    color: #555;
    text-align: center;
    font-size: 18px;
    margin: 10px 15px 40px
}

.wrong-page .wrong-page-text a {
    display: block;
    width: 220px;
    background-color: #2e343f;
    color: #fff;
    text-align: center;
    font-size: 14px;
    text-transform: capitalize;
    padding: 8px 10px;
    margin: 15px auto;
    border: none;
    outline: 0;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 5px -1px #222
}

.wrong-page .wrong-page-text .hvr-bounce-to-right:before {
    background-color: #555;
    border-radius: 4px
}

/*------------------------------------------------------------------------------------------*/
/* 10. Footer */
/*------------------------------------------------------------------------------------------*/
footer {
    background-color: #2e343f;
    color: #aaa
}

footer .footer-bottom {
    padding: 20px 0;
    border-top: 1px solid #3e3e3e;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

footer .footer-bottom .copyright {
    text-align: center;
    font-size: 13px
}

footer .footer-bottom .copyright a {
    color: #da2851
}

footer .footer-bottom .copyright a:hover {
    color: #ff2b5b
}

footer .footer-bottom .social-media {
    cursor: default
}

footer .footer-bottom .social-media i {
    font-size: 20px;
    margin: 0 3px
}

footer .footer-bottom .social-media i:hover {
    color: #ff2b5b
}

/*------------------------------------------------------------------------------------------*/
/* 11. Scroll To Top */
/*------------------------------------------------------------------------------------------*/
.Scroll-To-Top {
    position: fixed;
    right: -40px;
    bottom: 15px;
    z-index: 4000;
    height: 30px;
    width: 30px;
    background-color: #ff2b5b;
    color: #fff;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    cursor: pointer;
    opacity: .7
}

.Scroll-To-Top:hover {
    opacity: 1
}

.Scroll-To-Top:active {
    opacity: .8
}

/*------------------------------------------------------------------------------------------*/
/* 12. Loading Screen */
/*------------------------------------------------------------------------------------------*/
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8000;
    height: 100%;
    width: 100%;
    background-color: #2e343f;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.loading-screen img {
    -webkit-animation: shake 1s infinite linear;
    animation: shake 1s infinite linear
}

@-webkit-keyframes shake {
    0% {
        -webkit-transform: translate(2px, 1px) rotate(0deg);
        transform: translate(2px, 1px) rotate(0deg)
    }
    10% {
        -webkit-transform: translate(-1px, -2px) rotate(-1deg);
        transform: translate(-1px, -2px) rotate(-1deg)
    }
    20% {
        -webkit-transform: translate(-3px, 0) rotate(1deg);
        transform: translate(-3px, 0) rotate(1deg)
    }
    30% {
        -webkit-transform: translate(0px, 2px) rotate(0deg);
        transform: translate(0px, 2px) rotate(0deg)
    }
    40% {
        -webkit-transform: translate(1px, -1px) rotate(1deg);
        transform: translate(1px, -1px) rotate(1deg)
    }
    50% {
        -webkit-transform: translate(-1px, 2px) rotate(-1deg);
        transform: translate(-1px, 2px) rotate(-1deg)
    }
    60% {
        -webkit-transform: translate(-3px, 1px) rotate(0deg);
        transform: translate(-3px, 1px) rotate(0deg)
    }
    70% {
        -webkit-transform: translate(2px, 1px) rotate(-1deg);
        transform: translate(2px, 1px) rotate(-1deg)
    }
    80% {
        -webkit-transform: translate(-1px, -1px) rotate(1deg);
        transform: translate(-1px, -1px) rotate(1deg)
    }
    90% {
        -webkit-transform: translate(2px, 2px) rotate(0deg);
        transform: translate(2px, 2px) rotate(0deg)
    }
    100% {
        -webkit-transform: translate(1px, -2px) rotate(-1deg);
        transform: translate(1px, -2px) rotate(-1deg)
    }
}

@keyframes shake {
    0% {
        -webkit-transform: translate(2px, 1px) rotate(0deg);
        transform: translate(2px, 1px) rotate(0deg)
    }
    10% {
        -webkit-transform: translate(-1px, -2px) rotate(-1deg);
        transform: translate(-1px, -2px) rotate(-1deg)
    }
    20% {
        -webkit-transform: translate(-3px, 0) rotate(1deg);
        transform: translate(-3px, 0) rotate(1deg)
    }
    30% {
        -webkit-transform: translate(0px, 2px) rotate(0deg);
        transform: translate(0px, 2px) rotate(0deg)
    }
    40% {
        -webkit-transform: translate(1px, -1px) rotate(1deg);
        transform: translate(1px, -1px) rotate(1deg)
    }
    50% {
        -webkit-transform: translate(-1px, 2px) rotate(-1deg);
        transform: translate(-1px, 2px) rotate(-1deg)
    }
    60% {
        -webkit-transform: translate(-3px, 1px) rotate(0deg);
        transform: translate(-3px, 1px) rotate(0deg)
    }
    70% {
        -webkit-transform: translate(2px, 1px) rotate(-1deg);
        transform: translate(2px, 1px) rotate(-1deg)
    }
    80% {
        -webkit-transform: translate(-1px, -1px) rotate(1deg);
        transform: translate(-1px, -1px) rotate(1deg)
    }
    90% {
        -webkit-transform: translate(2px, 2px) rotate(0deg);
        transform: translate(2px, 2px) rotate(0deg)
    }
    100% {
        -webkit-transform: translate(1px, -2px) rotate(-1deg);
        transform: translate(1px, -2px) rotate(-1deg)
    }
}


/*==========================================================================================*/
/* 13. Responsive */
/*==========================================================================================*/

/*------------------------------------------------------------------------------------------*/
/* 1. Large Screen */
/*------------------------------------------------------------------------------------------*/
@media (min-width: 1200px) {
    .container {
        width: 1170px
    }
}

/*------------------------------------------------------------------------------------------*/
/* 2. Medium Screen */
/*------------------------------------------------------------------------------------------*/
@media (min-width: 992px) and (max-width:1199px) {
    .container {
        width: 90%
    }
}


/*------------------------------------------------------------------------------------------*/
/* 3. Small Screen */
/*------------------------------------------------------------------------------------------*/
@media (max-width: 991px) {
    .container {
        width: 90%
    }
    
    nav ul {
        display: none
    }
    
    div.mobile-menu-button {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
    
    .contact-me form {
        width: 700px
    }
    
    .post-page .related-posts {
        display: none
    }
    
    .post-page .post-img-and-text {
        width: 100%
    }
    
    .post-page .comments-area .members-comments p {
        margin: 20px 0 15px -60px
    }
    
    .post-page .members-comments form {
        margin-left: -60px
    }
    
    .post-page .comments-area {
        width: auto
    }
    
    .post-page .comments-area form textarea,
    .post-page .comments-area form div {
        width: calc(100% - 10px);
        margin: 5px
    }
    
    .post-page .comments-area form textarea {
        height: 100px
    }
}


/*------------------------------------------------------------------------------------------*/
/* 4. Extra Small Screen */
/*------------------------------------------------------------------------------------------*/
@media (max-width: 767px) {
    .container {
        width: auto;
        margin: 0
    }
    
    div.mobile-menu-body div {
        font-size: 14px
    }
    
    div.about-me .about-text a {
        width: 80%
    }
    
    .blog .pagination ul {
        margin: 10px
    }
    
    .contact-me form {
        width: 90%
    }
    
    .contact-me form textarea {
        height: 130px
    }
    
    footer .footer-bottom {
        padding: 10px 0;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-flex-wrap: wrap-reverse;
        -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse
    }
    
    footer .footer-bottom > div {
        margin: 8px 20px
    }
}


/*------------------------------------------------------------------------------------------*/
/* 5. Extra Extra Small Screen */
/*------------------------------------------------------------------------------------------*/
@media (max-width: 599px) {
    .blog .blog-content .blog-post {
        width: 80%
    }
    
    .wrong-page {
        min-height: 500px
    }
    
    .Scroll-To-Top {
        bottom: 58px
    }
}

/*------------------------------------------------------------------------------------------*/
/* 6. Screen Width 400px */
/*------------------------------------------------------------------------------------------*/
@media (max-width: 400px) {
    .blog .pagination ul {
        margin: 20px
    }
    
    .blog .pagination ul li:first-of-type,
    .blog .pagination ul li:last-of-type {
        display: block;
        max-width: 170px;
        margin: 5px auto
    }
    
    .wrong-page {
        min-height: 450px
    }
}