/*-------------------------------------------------------------
---------------------------------------------------------------
	## Specific adjusts for big screens
---------------------------------------------------------------
-------------------------------------------------------------*/

@media only screen and (max-width: 1600px) {
	
	.header-internal {
		background-size: initial;
	}

}

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

	#about-me-home .left-col h4 {
		margin-left: -80px;
	}

}

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

	#about-me-home .left-col h4 {
		position: relative;
		margin: 20px 80px 0 0;
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		text-align: right;
	}

	.three-logos img {
		padding: 0 1%;
	}

	#portfolio-home a {
		height: 85%;
	}

	.button-group button {
		margin: 0 5px;
	}

	form {
		margin-top: 50px;
		padding-left: 50px;
	}

}

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

	#about-me-home .left-col .gray-box {
		display: none;
	}

	#about-me-home .three-logos {
		margin: 100px auto 0 auto;
	}

	span.hover {
		font-size: 22px;
		line-height: 22px;
	}

	#portfolio-home a:hover span.hover {
		padding-top: 60%;
	}

	.button-group {
		text-align: center;
	}

	.button-group button {
		padding: 15px 30px;
		float: none;
	}

}

/*-------------------------------------------------------------
---------------------------------------------------------------
	## Large devices (desktops, less than 1200px)
---------------------------------------------------------------
-------------------------------------------------------------*/

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

	#about-me-home {
		margin-top: 100px;
	}

	#about-me-home .right-col {
		padding-left: 30px;
	}

	#about-me-home .left-col h4 {
		margin: 20px auto 0 auto;
		display: block;
		text-align: center;
	}

	#about-me-home .right-col h2 {
		padding-top: 100px;
	}

	#about-me-home a {
		margin-left: 0;
	}

	#portfolio-home {
		margin-top: 100px;
	}

	#portfolio-home a {
		height: 80%;
	}

	#portfolio-home .white-line {
		height: 70px;
		margin: -20px 0 0 10px;
	}

	#portfolio-home p {
		font-size: 16px;
		line-height: 16px;
		margin: 20px 0 0 30px;
	}

	h4.name-about {
		margin-right: 50px;
		font-size: 22px;
	}

	.about-img-01 {
		width: 600px;
	}

	.about-img-02 {
		width: 580px;
	}

	.button-group button {
		padding: 10px 20px;
		font-size: 18px;
	}

}

/*-------------------------------------------------------------
---------------------------------------------------------------
	## Medium devices (tablets, less than 992px)
---------------------------------------------------------------
-------------------------------------------------------------*/

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

	#fsmenu li a {
		font-size: 30px;
	}

	h2 {
		font-size: 40px;
		line-height: 40px;
	}

	p {
		font-size: 18px;
		line-height: 36px;
	}

	a.read-more {
		font-size: 20px;
		line-height: 20px;
	}

	a.read-more::before {
		width: 50px;
	}

	#about-me-home .right-col h2 {
		padding-top: 50px;
	}

	#about-me-home .right-col {
		padding: 0 30px;
		margin: 0 auto;
	}

	.three-logos img {
		display: block;
		margin: 50px auto;
		padding: 0 5%;
		max-width: 400px;
	}

	.three-logos::after {
		margin: 30px 0 75px 0;
	}

	h3 {
		font-size: 40px;
		line-height: 40px;
		margin-top: -70px;
	}

	form {
		margin-top: 100px;
	}

	.header-internal-wrapper .white-block {
		width: 360px;
	}

	.first-txt,
	.second-txt {
		padding: 0;
	}

	.about-imgs {
		margin: 50px auto;
		text-align: center;
	}

	.about-img-01,
	.about-img-02 {
		width: initial;
		max-width: 680px;
		padding: 10px 20px;
		float: none;
		margin: 0;
		position: relative;
	}

	.right {
		text-align: initial;
		width: initial;
		display: initial;
	}

	.about-imgs .gray-block,
	h4.name-about {
		display: none;
	}

	.social-contact-title {
		margin-top: 5px;
	}

	.button-group button {
		padding: 10px 15px;
		font-size: 16px;
		-moz-box-shadow: inset 0 0 0 1px #404148;
		-webkit-box-shadow: inset 0 0 0 1px #404148;
		box-shadow: inset 0 0 0 1px #404148;
		margin: 5px;
	}

	.black-line {
		margin: -35px 0 0 10px
	}

	.grid-item span {
		font-size: 16px;
		margin: 10px 0 30px 20px;
	}

	.modern.light .stream li,
	.modern .stream li {
		width: 50%;
		padding-bottom: 50%;
	}

}

/*-------------------------------------------------------------
---------------------------------------------------------------
	## Specfic details that needed to be fixed before small
---------------------------------------------------------------
-------------------------------------------------------------*/

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

	.phone {
			margin-right: 0;
	}

}

/*-------------------------------------------------------------
---------------------------------------------------------------
	## Small devices (landscape phones, less than 768px)
---------------------------------------------------------------
-------------------------------------------------------------*/

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

	#about-me-home .left-col,
	#about-me-home .right-col {
		text-align: center;
	}

	#portfolio-home > div > div {
		padding: 10px;
	}

	#portfolio-home-2 {
		margin-top: -800px;
		padding-top: 800px;
	}

	h3 {
		font-size: 30px;
		line-height: 30px;
		margin-top: -50px;
	}

	#contact-home {
		padding-top: 100px;
	}

	#contact-home .big-title {
		margin-bottom: -5px;
	}

	form {
		margin: 0 auto;
		padding: 0;
	}

	form #btnSendMail {
		float: none;
		text-align: center;
		margin: 0 auto;
		display: block;
	}

	.center-col {
		text-align: center;
	}

	.center-col img {
		padding: 0 20px;
		max-width: 100%;
	}

	.phone {
		float: none;
		margin: 20px auto 0 auto;
		text-align: center;
	}

	.form-contact-page {
		margin-top: 75px;
	}

	form {
		margin-top: 50px;
	}

	form input,
	form textarea {
		font-size: 18px;
		line-height: 30px;
	}

	form #btnSendMail {
		font-size: 18px;
	}

	#bottom {
		padding-top: 100px;
	}

	#about-me,
	#portfolio,
	#contact,
	.social-contact-title {
		text-align: center;
	}

	.title-internal {
		margin: 50px 0;
	}

	.second-txt {
		padding-left: 0;
		margin-top: 30px;
	}

	#bottom .center-txt {
		margin-top: -70px;
	}

	#bottom a.hollow {
		font-size: 16px;
	}

	.about-img-01,
	.about-img-02 {
		max-width: 100%;
		padding: 5px 10px;
	}

	.last-row {
		text-align: center;
	}

	.font-light {
		margin-bottom: 30px;
	}

	.font-light br {
		display: none;
	}

	.contact-txt {
		max-width: initial;
	}

	.social-contact-title {
		margin-top: 50px;
	}

	#after-form {
		text-align: center;
	}

	#after-form h2 {
		margin: 20px 0 30px 0
	}

	.grid-item,
	.grid-sizer {
		width: 50%;
	}

}

/*-------------------------------------------------------------
---------------------------------------------------------------
	## Extra small devices (portrait phones, less than 576px)
---------------------------------------------------------------
-------------------------------------------------------------*/

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

	#fsmenu li a {
		font-size: 20px;
	}

	.left-side {
		text-align: left;
		padding-top: 20px;
		padding-bottom: 20px;
		width: 300px;
	}

	.social-vertical {
		display: none;
	}

	#menu-icon {
		top: 30px;
		right: 20px;
		width: 60px;
		height: 60px;
	}

	.nav-icon {
		width: 25px;
		margin: 20px 0 0 18px;
	}

	.swiper-container .swiper-slide {
		height: 500px;
		background-size: cover;
	}

	.swiper-container .slide-001 { background: url(../imgs/main-banner-01-mobile.jpg) center center no-repeat; }
	.swiper-container .slide-002 { background: url(../imgs/main-banner-02-mobile.jpg) center center no-repeat; }
	.swiper-container .slide-003 { background: url(../imgs/main-banner-03-mobile.jpg) center center no-repeat; }
	.swiper-container .slide-004 { background: url(../imgs/main-banner-04-mobile.jpg) center center no-repeat; }

	img.mobile { display: block; }
	img.desktop { display: none; }

	.white-block,
	.swiper-pagination {
		right: 0;
		left: 0;
		margin: 0 auto;
		text-align: center;
		padding: 0;
	}

	.white-block {
		width: 80%;
	}

	.swiper-pagination span {
		margin: 0 15px;
	}

	#about-me-home .left-col h4 {
		font-size: 20px;
		line-height: 20px;
	}

	#about-me-home .right-col h2 {
		padding: 30px 0;
	}

	#about-me-home .right-col p {
		margin-bottom: 30px;
	}

	.three-logos img {
		max-width: 100%;
	}

	#portfolio-home {
		margin-top: 70px;
	}

	#portfolio-home p {
		font-size: 14px;
		line-height: 14px;
	}

	#portfolio-home-2 {
		margin-top: -600px;
		padding-top: 650px;
	}

	.big-text {
		padding: 0 20px;
	}

	#portfolio-home-2 .white-line {
		height: 50px;
		margin: 30px auto 20px auto;
	}

	.modern.light .stream li,
	.modern .stream li {
		width: 100%;
		padding-bottom: 100%;
	}

	h2 {
		font-size: 24px;
		line-height: 24px;
	}

	p {
		font-size: 16px;
		line-height: 32px;
	}

	a.read-more,
	#portfolio-home-2 a {
		font-size: 16px;
		line-height: 16px;
	}
	
	h3 {
		font-size: 20px;
		line-height: 20px;
		margin: -30px auto 50px auto;
	}
	
	#contact-home .big-title {
		margin-bottom: 20px;
	}

	.center-col img {
		padding: 0 5px;
	}

	#header .left-side {
		padding-top: 20px;
	}

	.header-internal {
		height: 250px;
		background-attachment: initial;
		background-position: center center;
	}

	.header-001 { background-image: url(../imgs/header-internal-001-mobile.jpg); }
	.header-002 { background-image: url(../imgs/header-internal-002-mobile.jpg); }
	.header-003 { background-image: url(../imgs/header-internal-003-mobile.jpg); }

	.header-internal-wrapper .white-block {
		height: 50px;
		width: 75%;
		margin: 200px auto 0 auto;
	}

	.title-internal {
		margin: 0 0 30px 0;
		position: relative;
		z-index: 3;
		text-align: center;
	}

	#bottom .center-txt {
		margin: -90px auto 50px auto;
	}

	ul.social-bottom li:last-child {
		display: block;
		margin-bottom: 50px;
	}

	ul.social-bottom li span {
		display: block;
		margin: 40px auto 20px auto;
	}

	#bottom h3 {
		display: block;
		margin: 20px auto;
	}

	.button-group {
		margin: 50px 0;
	}

	.black-line {
		margin: -35px 0 0 5px
	}

	.grid-item span {
		font-size: 14px;
		margin: 10px 0 25px 15px;
	}

	.video-row {
		margin-bottom: 20px;
	}
	
}

/*-------------------------------------------------------------
---------------------------------------------------------------
	## Specfic details that needed to be fixed before extra small
---------------------------------------------------------------
-------------------------------------------------------------*/

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

	#portfolio-home-2 {
		margin-top: -450px;
		padding-top: 530px;
	}

}

/*-------------------------------------------------------------
---------------------------------------------------------------
	## Really, really small devices (iPhone 4 or less | 330px)
---------------------------------------------------------------
-------------------------------------------------------------*/

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

	#portfolio-home {
		background-color: #222;
		padding-top: 50px;
	}

	#portfolio-home .col-6 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	#portfolio-home > div > div {
		padding: 10px 0 0 0;
	}

	#portfolio-home-2 {
		margin-top: 0;
		padding-top: 50px;
	}

	.grid-item,
	.grid-sizer {
		width: 100%;
	}

	.button-group button {
		width: 100%;
		display: block;
		margin: 5px 0;
	}

}

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



}