/* -------------------------
    RESPONSIVE
------------------------- */
@media (min-width:1920px) {
    .name-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 122px;
        top: 90px;
    }

    .about-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 702px;
        top: -60px;
    }

    .portfolio-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 897px;
        top: 179px;
    }

    .blog-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 1092px;
        top: 518px;
    }

    .contact-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 1386px;
        top: 138px;
    }
	.name-block.reverse {
		width: 400px;
		left: 300px;
	}
	#project-modal,	#post-modal, .content-blocks {
		width: 880px;
		left: 700px;
	}
	.inline-menu-container {
		width: 880px;
		left: 700px;
	}
}
@media (min-width:1280px) and (max-width:1919px) {

    .name-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: -190px;
        top: 10px;
    }

    .about-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 382px;
        top: -150px;
    }
    .portfolio-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 577px;
        top: 89px;
    }

    .blog-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 772px;
        top: 428px;
    }

    .contact-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 1067px;
        top: 48px;
    }
}

@media (min-width:1025px) and (max-width:1280px) {

    .name-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: -200px;
        top: -80px;
    }

    .about-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 419px;
        top: -160px;
		width:350px;
		height: 300px;
    }

    .portfolio-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 586px;
        top: 88px;
		width:350px;
		height: 300px;
    }

    .blog-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 753px;
        top: 335px;
		width:350px;
		height: 300px;
    }

    .contact-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 900px;
        top: -70px;
		width:350px;
		height: 300px;
    }
}

@media (min-width:981px) and (max-width:1024px) {

    .name-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: -190px;
        top: 10px;
    }

    .about-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 382px;
        top: -150px;
    }

    .portfolio-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 577px;
        top: 89px;
    }

    .blog-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 772px;
        top: 428px;
    }

    .contact-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 365px;
        top: 538px;
    }
}

@media (min-width:768px) and (max-width:980px) {

    .name-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: -190px;
        top: 10px;
    }

    .about-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 382px;
        top: -150px;
    }

    .portfolio-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 577px;
        top: 89px;
    }

    .blog-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 336px;
        top: 548px;
    }

    .contact-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 9px;
        top: 780px;
    }

	.project {
		width: 50%;
    }
}

@media (max-width:800px) and (max-height:600px) {
	.home {
		background: url(../images/bg.jpg) #333 100% 100%;
		overflow-y: scroll;
	}

	.name-block, .about-block, .portfolio-block, .blog-block, .contact-block {
        position: relative;
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        width: 100%;
        height: auto;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.5);
        display: table;
        left: 0;
        top: 0;
    }

	.name-block-container,
	.about-block-container,
	.portfolio-block-container,
    .blog-block-container,
	.contact-block-container {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        padding: 0 0 0 0;
    }

    h2.menu-item {
        line-height: 3em;
        margin-bottom: 0;
        display: block;
    }

	h2.menu-item:after {
		position: absolute;
		content: '';
		top: 15px;
		left: -20px;
		width: 70px;
		height: 1px;
		background: #FFF;
		transition: all 0.5s ease;
	}

    .social {
        position: relative;
        margin: 50px 0;
    }

	#post-modal,
	#project-modal,
    .content-blocks {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        left: 0;
    }
	.inline-menu-container {
		width: 100%;
		left: 0;
	}
}

@media (max-width:768px) {

	.home {
		background: url(../images/bg.jpg) #333 50% 50%;
	}

	.name-block,
	.about-block,
	.portfolio-block,
    .blog-block,
	.contact-block {
        position: relative;
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        width: 100%;
        height: auto;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.5);
        display: table;
        left: 0;
        top: 0;
    }

	.name-block-container,
	.about-block-container,
	.portfolio-block-container,
    .blog-block-container,
	.contact-block-container {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        padding: 0 0 0 0;
    }

    h2.menu-item {
        line-height: 3em;
        margin-bottom: 0;
        display: block;
    }

	h2.menu-item:after {
		position: absolute;
		content: '';
		top: 15px;
		left: -20px;
		width: 70px;
		height: 1px;
		background: #FFF;
		transition: all 0.5s ease;
	}

    .social {
        position: relative;
        margin: 50px 0;
    }

	#post-modal,
	#project-modal,
    .content-blocks {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        left: 0;
    }
	.inline-menu-container {
		width: 100%;
		left: 0;
	}
}

@media (max-width:568px) {

	.home {
		overflow-y: scroll;
	}

    .name-block-container h1 span {
        font-size: 26px;
    }

    .name-block-container h1 {
        font-size: 36px;
    }

    .name-block-container h2 {
        font-size: 22px;
    }

    h2.menu-item {
        font-size: 20px;
        line-height: 2em;
		margin: 25px 0 25px 40px;
    }
	h2.menu-item:before {
		position: absolute;
		top: -20px;
		left: -20px;
		font-size: 14px;
	}
	h2.menu-item:after {
		display: none;
	}

    .social {
        display: none;
    }

	.project {
		width: 100%;
    }
}