/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 6, 2021, 14:10:59
    Author     : maticm
*/


@media screen and (max-width: 1200px){
    .main-navbar .nav>li>a{
        margin-right: 25px;
    }
    .main-navbar .nav>li:last-child>a{
        margin-right: 25px;
    }
    .social_icons {
        padding-right: 10px;
    }
}


@media screen and (max-width: 1100px){
}

@media screen and (max-width: 991px){
    #sidebarCollapse {
        display:block !important;
    }
    .body{
        font-size: 13px;
    }
    .main-navbar .nav>li>a{
        margin-right: 15px;
        font-size: 11px;
    }
    .main-navbar .nav>li:last-child>a{
        margin-right: 25px;
    }
    /*.navbar-brand>img {
        margin-left: 20px;

    }*/
    .social_icons {
        padding-right: 10px;
    }
    .footer span {
        margin-right: 15px;
    }
    .image-container::after {
        bottom: 50px;
        left: -10%;
        width: 120%;
        height: 100%;
    }
    .image-container{
        text-align: center;
    }
    .image-container img{
        width: 80%;
    }
    .headerContent {
        margin-top: 50px;
        text-align: center;
    }
    .headerContent h1{
        font-size: 26px;
    }
    .introduction {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .introduction img {
        width: 40%;
        height: auto;
    }
    .introImg{
        text-align: center;
    }
    .helloContent .content{
        margin-bottom: 20px;
    }
    .divider{
        display: none;
    }
    .padding-left{
        padding-left: 0;
    }
    .blogs{
        text-align: center;
        margin-top: 30px;
    }
    .singleBlog {
        padding-bottom: 30px;
    }

    .aboutMeImg img {
        width: 80%;
        height: auto;
    }
    .aboutMeImg:after {
        content: '';
        position: absolute;
        z-index: -1;
        bottom: -60%;
        left: 0%;
        width: 100%;
        height: 100%;
        background: #dee5e0;
        overflow: hidden;
    }
    .aboutMeText {
        margin-top: 60px;
        padding-right: 0;
        text-align: center;
        padding-left: 20%;
        padding-right: 20%;
    }
    .aboutMeText h1{
        margin-bottom: 30px;
        font-size: 26px;
    }
    .aboutMeContent {
        padding-top: 80px;
        padding-bottom: 60px;
    }
    .newsletter {
        padding-top: 60px;
    }
    .newsletter p{
        padding-bottom: 80px;
    }

    .newsLetterCard:first-child {
        margin-top: -30px;
    }

    .writingImage {
        width: 100%;
        height: 200px;
    }
    .writingCardContent {
        background-color: #ffffff;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .writingCard .cardTitle{
        font-size: 15px;
    }
    .noContent2, .noContent {
        font-size: 16px;
    }
    .writing {
        padding-bottom: 60px;
    }
    .authorImageBox{
        left: 34%;
    }
    .blogContent:after{
        border-right: 0;
        border-bottom: 1px solid #e0dada;
        width: 100%;
    }
    .blogContent{
        padding-right: 0;
        padding-bottom: 60px;
    }
    .blogLine:after{
        display: none;
    }
    .blogAuthor{
        padding-left: 0;
        padding-bottom: 50px;
        padding-top: 50px;
    }
    .blogAuthor:after{
        content:'';
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-bottom: solid 1px #e0dada;
        overflow: hidden;
    }
    .buttonContainer{
        text-align: center;
    }
    .singleBlogBlogs{
        padding-left: 0;
        padding-top: 40px;
    }
    .singleBlogBlogs:after{
        display: none;
    }
    .blogTitle h1{
        font-size: 40px;
    }
}
@media screen and (max-width: 800px){
    .main-navbar .nav>li>a{
        margin-right: 8px;
        font-size: 11px;
    }
    .main-navbar .nav>li:last-child>a{
        margin-right: 20px;
    }
    /*.navbar-brand>img {
        margin-left: 10px;

    }*/
    .social_icons {
        padding-right: 0px;
    }
}
@media screen and (max-width: 767px){
    .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background-color: #000000;
    }
    .navbar-toggle{
        margin-top: 25px;
    }
    .main-navbar .nav.navbar-right{
        background-color: #fbfbfb;
        margin-top: 5px;
        border-bottom: 1px solid #e0dada;
    }
    .main-navbar .nav>li>a{
        margin-left: 12px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .submitNewsletter{
        font-size: 10px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .helloContent{
        padding-top: 10px;
        padding-left: 0px;
    }
    .footer .copyright{
        text-align: center;
        margin-top: 5px;
    }
    .aboutMeImg:after{
        bottom: -100%;
        height: 150%;
    }
    .aboutMeContent{
        padding-top: 50px;
    }
    .cards{
        width: 80%;
        margin-left: 10%;
    }
    .newsletterHeader {
        height: 45vh;
    }
    .newsletterHeader h1{
        margin-top: 15vh;
    }
    .newsletterHeader .categories{
        margin-top: 10vh;
    }
    .authorImageBox{
        left: 35%;
        width: 30%;
        height: 150px;
    }
    .subpageHeader{
        height: 40vh;
    }
    .subpageHeader h1{
        margin-top: 18vh;
    }
    .blogText{
        font-size: 13px;
    }
    .newsLetterCard .date{
        text-align: left;
        padding-top: 5px;
    }
}


@media screen and (max-width: 580px){
    .submitNewsletter{
        font-size: 10px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .helloContent{
        padding-top: 10px;
        padding-left: 0px;
    }
    .aboutMeText{
        margin-top: 40px;
    }
    .aboutMeText h1{
        font-size: 22px;
    }
    .aboutMe {
        padding-bottom: 80px;
    }
    .newsletter h2{
        font-size: 26px;
    }
    .authorImageBox{
        top: -180px;
    }
}

@media screen and (max-width: 530px){
    .authorImageBox{
        height: 140px;
        width: 140px;
    }
}

@media screen and (max-width: 450px){
    .cards{
        width: 100%;
        margin-left: 0;
    }
    .aboutMeImg:after {
        bottom: -125%;
        height: 180%;
    }
    .authorImageBox{
        left: 32%;
    }
}
@media screen and (max-width: 400px){
    .aboutMeImg:after {
        bottom: -155%;
        height: 210%;
    }
    .aboutMeText p{
        font-size: 14px;
    }
    .authorImageBox{
        left: 28%;
    }
}
@media screen and (max-width: 350px){
    .aboutMeImg:after {
        bottom: -165%;
        height: 220%;
    }
    .aboutMeText p{
        font-size: 13px;
    }
    .authorImageBox{
        left: 25%;
    }
}