@media only screen and (max-width: 900px) {

}
/*profile page media queries*/
@media only screen and (max-width: 575px) {
	#header .navbar-nav {
		float: none;
		text-align: center;
		background-color: white;
	}
	#header {
		height: auto !important;
	}
	#header .navbar-nav li {
		margin:0 auto;
	}
	#nav-buttons {
		display: inline-block;
		margin: 0 auto;
	}
	.navbar-toggler {
		margin: 0 auto;
	}
	.navbar-toggler-icon {
		font-size: 1.5em;
	}
	#navbarCollapse {
		width: 100%;
	}
	.square {
		display: none;
		/*font-size: 40px;
		margin:0 auto;*/
	}
	#name-responsive {
		display: inline-block;
		font-size: 1.2rem;
		margin:0 auto;
		font-weight: 500;
		line-height: 0.725em;
		letter-spacing:1px;
		font-family: Perpetua,Baskerville,
			Big Caslon,Palatino Linotype,Palatino,
			URW Palladio L,Nimbus Roman No9 L,serif;
	}
	#banner {
		display: none;
	}
	#banner-h2 {
		float: none;
		margin-top: 3em;
		font-size: 22px;
	}
	#banner-container {
		height: 37.5em;
	}
	#block1 {
		height: auto;
	}
	#contact-right p {
		padding-bottom:20px;
	}
	#contact-right h2 {
        font-size: 1.5em;
    }
	#animation-tab {
		display: none;
	}
	#about-section {
		margin:0 auto;
	}
	#about-section h1 {
	    font-size: 6em;
	}
	.about-me {
		font-size: 8.5em;
		margin:80px auto 0;
	}
	.bounce-up .subject {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.about-descript {
		display: none;
	}
	.about-me-flex {
		height: auto;
	}
	.blur .image {
		-moz-filter: blur(1px);
		-webkit-filter: blur(1px);
		filter: blur(1px);	
	}
	.am-link-container .overlay {
		opacity:0.7;
	}
	.text {
		opacity: 1;
		font-size: 1.25em;
	}
	.projects {
		height: auto;
		-moz-transition: none;
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
	}
	.projects a {
		transition: none;
	}
	.projects-others, .projects-coding {
		-moz-transition: none;
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
		height: auto;
		width: 100%;
		max-width: 100%;
		flex: 100%;
	}
	#p-others:hover, #n-others:hover {
		background-color: transparent;
		color: #ffdb4d;
	}
	#p-coding:hover, #n-coding:hover {
		background-color: transparent;
		color: #00004d;
	}
	.previous, .nexxt {
		padding: 0;
	}
	#moreProjects-btn {
	    width: 35%;
	    padding: 5px 8px;
	}
	#coding-github-btn {
		background: white;
		border: 1px solid #00004d;
		color: #00004d;
	}
	.carousel-control-prev-icon {
	    background-image:
	    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
	}
	.carousel-control-next-icon {
	    background-image:
	    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
	}
	.skills-box {
		height: 32.5em;
	}
	.skills-box .skillboxp {
		padding: 15px 25px 0;
		font-size: 1em;
	}
	.skills-box h2 {
		font-size: 2em;
		height: 18.5%;
	}
	.skillboxh3-top {
	    line-height: 30px;
	}
	.skillboxh3-bottom {
        line-height: 29px;
    }
	.skills-box h3 {
		font-size: 1.45rem;
		padding: 10px 25px 0;
	}
	.skillbox-span {
        font-size: 20.5px;
    }
    .skillbox-span2 {
        font-size: 19px;
    }
	#footer-contact {
		font-size: 3.25em;
		text-align: center;
	}
	#footer-contact a {
		transition: none;
	}
	#footer-contact a.before:before,
	#footer-contact a.after:after {
		content: none;
	}
	.footer-left {
		width: 100%;
	}
	.footer-left p {
		font-size: 15px;
		margin:0 auto;
	}
	footer, .flex-footer {
		height: auto;	
	}
	.footer-left img {
		height: auto;
	}
	#bottom-footer .footer-center,#bottom-footer .footer-right {
		display: none;
	}
}
@media only screen and (min-width: 362px) {
	#content {
		height: 1625vh;
	}
	.square {
		display: none;
	}
	.text {
		font-size:1.35em;
	}
	#name-responsive {
		display: inline-block;
		font-size: 1.2rem;
		margin:0 auto;
		font-weight: 500;
		line-height: 0.725em;
		letter-spacing:1px;
		font-family: Perpetua,Baskerville,
			Big Caslon,Palatino Linotype,Palatino,
			URW Palladio L,Nimbus Roman No9 L,serif;
	}
	.previous, .nexxt {
		padding-right: 0;
	}
}
@media only screen and (min-width: 450px) {
    .modal-body .tab-content {
        display: block;
    }
    .modal-title {
        font-size: 20px;
    }
    .projectModalRight {
        padding:0 0 0 35px;
    }
    .projectModalRight p {
        font-size: 12px;
        line-height: 16.5px;
    }
}
@media only screen and (max-width: 480px) {
    .projects h1 {
        font-size: 2.5em;
    }
}
@media only screen and (max-width: 451px) {
    .modal-body .tab-content {
        display: none;
    }
    .modal-title {
        font-size: 18px;
    }
    #banner-h2 {
        font-size: 19px;
    }
    .projects h1 {
        font-size: 2.2em;
    }
    #skillbox-desktopapp {
        font-size: 1.75em;
    }
}
@media only screen and (min-width: 500px) {
	#content {
		height: 2195vh;
	}
    .projectModalRight {
        padding:0 0 0 35px;
    }
    .projectModalRight p {
        font-size: 12px;
        line-height: 16.5px;
    }
}
@media only screen and (max-width: 535px) {
    #moreProjects-btn {
        width: 40%;
    }
    #about-section h1 {
        font-size: 5em;
    }
    .about-me {
        font-size: 7.5em;
    }
}
@media only screen and (max-width: 510px) {
    #contact-right h2 {
        font-size: 1.3em;
    }
}
@media only screen and (max-width: 452px) {
    #moreProjects-btn {
        width: 50%;
    }
    #about-section h1 {
        font-size: 4em;
    }
    .about-me {
        font-size: 6.5em;
    }
}
@media only screen and (max-width: 451px) {
    #carousel-mainProfilePage .navLinkWeb {
        width: 20em;
        height: 170px;
    }
    #carousel-mainProfilePage .navLinkResponsive {
        width: 9em;
        height: 170px;
    }
}
@media only screen and (max-width: 430px) {
    #contact-right h2 {
        font-size: 1.2em;
    }
}
@media only screen and (max-width: 405px) {
    #banner-h2 {
        font-size: 16px;
    }
    #contact-right h2 {
        font-size: 1.05em;
    }
    .projects h1 {
            font-size: 2em;
    }
}
@media only screen and (max-width: 368px) {
    #moreProjects-btn {
        width: 60%;
    }
    #about-section h1 {
        font-size: 3em;
    }
    .about-me {
        font-size: 5.5em;
    }
    #banner-h2 {
        font-size: 13.5px;
    }
    #contact-right h2 {
        font-size: 0.95em;
    }
    #skillbox-desktopapp {
        font-size: 1.6em;
    }
}
@media only screen and (min-width: 450px) {
    .tab-pane .modalImgWidthWeb {
        width: 15em;
    }
    .tab-pane .modalImgWidthResponsive {
        width: 7em;
    }
    .tab-pane img {
        height: 180px;
    }
}
@media only screen and (min-width: 500px) {
    .tab-pane .modalImgWidthWeb {
        width: 17em;
    }
    .tab-pane .modalImgWidthResponsive {
        width: 7em;
    }
    .tab-pane img {
        height: 180px;
    }
}
@media only screen and (min-width: 530px) {
	.text {
		font-size:1.45em;
	}
    .projectModalRight {
        padding:0 0 0 35px;
    }
    .projectModalRight p {
        font-size: 12px;
        line-height: 16.5px;
    }
    .tab-pane .modalImgWidthWeb {
        width: 17.5em;
    }
    .tab-pane .modalImgWidthResponsive {
        width: 9em;
    }
    .tab-pane img {
        height: 200px;
    }
}
/*don't forget to add responsive code for devices 575px and above and under 900px*/
@media only screen and (min-width: 575px) {
	#banner-h2 {
		font-size: 22px;
	}
	.about-descript {
		display: none;
	}
	.text {
		opacity: 1;
	}
	#content {
		height: 2285vh;
	}
	.modal-title {
        font-size: 25px;
    }
}
/*don't forget to add responsive code for devices 575px and above and under 900px*/
@media only screen and (min-width: 900px) {
	#content {
		height: 637vh;
	}
	#banner-h2 {
		font-size: 28px;
	}
	.about-descript {
		display: inline;
	}
	.text {
		opacity: 0;
	}
	.col-sm-3 {
		flex:0 0 20%;
		max-width: 20%;
	}
	.square {
		display: inline-block;
	}
	#name-responsive {
		display: none;
	}
	#about-section h1 {
    	    font-size: 12em;
    	}
	.text {
		font-size: 1.15em;
	}
	.previous, .nexxt {
		padding: 16px;
	}
	.tab-pane .modalImgWidthWeb {
        width: 29em;
    }
    .tab-pane .modalImgWidthResponsive {
        width: 11em;
    }
	.tab-pane img {
        height: 245px;
    }
    .projectModalRight p {
        font-size: 16px;
        line-height: 19.5px;
    }
}