/****************************
    - Responsive styles -
****************************/

/* Large Devices, Wide Screens @media only screen and (max-width:1600px) */
/* Notebook devices @media only screen and (max-width:1281px) */
/* Medium Devices, Desktops @media only screen and (max-width:1024px) */
@media only screen and (max-width:1024px) {
	h1 {
		font-size:3rem;
	}
	
	#right-side {
		width:100vw;
	}
	
	#right-side.right-side-opened {
		-webkit-transform:rotateZ(0deg) scale(1) translateX(-100vw);
		   -moz-transform:rotateZ(0deg) scale(1) translateX(-100vw);
				transform:rotateZ(0deg) scale(1) translateX(-100vw);
	}
	
	.mCSB_scrollTools {
		z-index:15;
	}
	
	.mCSB_scrollTools.right-side-opened {
		-webkit-transform:translateX(0);
		   -moz-transform:translateX(0);
				transform:translateX(0);
		opacity:1;
	}
	
	.mCSB_scrollTools .mCSB_draggerRail {
		background-color:rgba(117, 122, 134, 0.3);
	}
}

/* Small Devices, Tablets @media only screen and (max-width:768px) */
@media only screen and (max-width:768px) {
	.dialog .dialog__content {
		width:100%;
	}
	
	#right-side .photo-line figure {
		width:100%;
		padding:0 15px;
		margin:0 0 2rem;
	}
}

/* Extra Small Devices, Phones @media only screen and (max-width:480px) */
@media only screen and (max-width:480px) {
	#left-side {
		position:relative;
	}
	
	#left-side #particles-js {
		top:0;
		left:0;
		width:100vw;
		height:100vh;
	}
	
	#left-side .brand-logo {
		position:relative;
		top:auto;
		margin:2rem 0;
	}
	
	#left-side .content {
		position:relative;
		top:auto;
		margin:0 0 2rem;
		-webkit-transform:translateY(0);
		-moz-transform:translateY(0);
		-ms-transform:translateY(0);
		-o-transform:translateY(0);
		transform:translateY(0);
	}
	
	#left-side .content .light-btn, 
	#left-side .content .action-btn {
		width:100%;
		margin-bottom:1rem;
		text-align:center;
	}
	
	#left-side .content .action-btn {
		margin-bottom:0;
	}
	
	#left-side .useful-links {
		position:relative;
		left:0;
		bottom:auto;
		width:100%;
		padding:0 10%;
		margin-bottom:2rem;
	}
	
	#left-side .useful-links a {
		min-width:30px;
	}
	
	#left-side.right-side-opened {
		z-index:5;
		opacity:1;
	}
	
	#left-side.right-side-opened .slideshow {
		-webkit-transform:translateX(0);
		   -moz-transform:translateX(0);
				transform:translateX(0);
	}
	
	#right-side {
		top:auto;
		left:0;
		-webkit-transform:rotateZ(0deg) scale(1);
		   -moz-transform:rotateZ(0deg) scale(1);
				transform:rotateZ(0deg) scale(1);
		opacity:1;
	}
	
	#right-side.right-side-opened {
		left:0 !important;
		-webkit-transform:rotateZ(0deg) scale(1) translateX(0);
		   -moz-transform:rotateZ(0deg) scale(1) translateX(0);
				transform:rotateZ(0deg) scale(1) translateX(0);
	}
	
	#right-side #contact-form {
		margin-top:2rem;
	}
	
	#right-side #contact-form .ios {
		float:none;
		margin:1rem auto;
	}
	
	#right-side #contact-form label.check-news {
		margin-top:0;
	}
	
	#right-side #contact-form button#valid-form {
		width:100%;
		margin-top:1.5rem;
	}
	
	h1 {
		font-size:2rem;
	}
	
	h1.for-countdown {
		font-size:1.3rem;
	}
	
	#close-right-side {
		display:none;
	}
	
	.mCSB_scrollTools {
		z-index:15;
		opacity:1;
	}
	
	.dialog .dialog__content .dialog-inner {
		padding:60px 20px;
	}
	
	.dialog .dialog__content .dialog-inner h4 {
		margin-bottom:15px;
		font-size:20px;
	}
	
	.dialog .dialog__content .dialog-inner p {
		font-size:12px;
	}
	
	.dialog .dialog__content .dialog-inner #subscribe #notifyMe {
		margin-top:1em;
	}
	
	.dialog .dialog__content .dialog-inner #subscribe #notifyMe .form-group button.submit {
		font-size:80%;
		line-height:1;
	}
	
	.dialog .dialog__content .dialog-inner #subscribe .block-message {
		padding:8px;
	}
	
	.dialog .dialog__content .dialog-inner #subscribe p.notify-valid {
		font-size:12px;
	}
	
	.pswp__top-bar, 
	.pswp__caption {
		background:rgba(32, 35, 45, 0.9);
	}
	
	.pswp__caption h4 {
		font-size:15px;
	}
	
	.pswp__caption p {
		font-weight:300;
	}
}

/* Only for tablet in landscape mode @media only screen and (max-device-width:1024px) and (orientation:landscape) */
/* Only for phone in landscape mode @media screen and (max-device-width:667px) and (orientation:landscape) */
@media screen and (max-device-width:667px) and (orientation:landscape) {
	#left-side {
		position:relative;
	}
	
	#left-side #particles-js {
		top:0;
		left:0;
		width:100vw;
		height:100vh;
	}
	
	#left-side .brand-logo {
		position:relative;
		top:auto;
		margin:2rem 0;
	}
	
	#left-side .content {
		position:relative;
		top:auto;
		margin:0 0 2rem;
		-webkit-transform:translateY(0);
		   -moz-transform:translateY(0);
				transform:translateY(0);
	}
	
	#left-side .content .light-btn, 
	#left-side .content .action-btn {
		width:100%;
		margin-bottom:1rem;
		text-align:center;
	}
	
	#left-side .content .action-btn {
		margin-bottom:0;
	}
	
	#left-side .useful-links {
		position:relative;
		left:10%;
		bottom:auto;
		margin-bottom:2rem;
	}
	
	#left-side.right-side-opened {
		z-index:5;
		opacity:1;
	}
	
	#left-side.right-side-opened .slideshow {
		-webkit-transform:translateX(0);
		   -moz-transform:translateX(0);
				transform:translateX(0);
	}
	
	#right-side {
		top:auto;
		left:0;
		-webkit-transform:rotateZ(0deg) scale(1);
		   -moz-transform:rotateZ(0deg) scale(1);
				transform:rotateZ(0deg) scale(1);
		opacity:1;
	}
	
	#right-side.right-side-opened {
		left:0 !important;
		-webkit-transform:rotateZ(0deg) scale(1) translateX(0);
		   -moz-transform:rotateZ(0deg) scale(1) translateX(0);
				transform:rotateZ(0deg) scale(1) translateX(0);
	}
	
	#right-side #contact-form {
		margin-top:2rem;
	}
	
	#right-side #contact-form .ios {
		float:none;
		margin:1rem auto;
	}
	
	#right-side #contact-form label.check-news {
		margin-top:0;
	}
	
	#right-side #contact-form button#valid-form {
		width:100%;
		margin-top:1.5rem;
	}
	
	h1 {
		font-size:2rem;
	}
	
	#close-right-side {
		display:none;
	}
	
	.mCSB_scrollTools {
		z-index:15;
		opacity:1;
	}
	
	.dialog .dialog__content {
		width:100%;
		max-width:none;
	}
	
	.dialog .dialog__content .dialog-inner {
		height:100vh;
		padding:60px 20px;
	}
	
	.dialog .dialog__content .dialog-inner h4 {
		margin-bottom:15px;
		font-size:20px;
	}
	
	.dialog .dialog__content .dialog-inner p {
		font-size:12px;
	}
	
	.dialog .dialog__content .dialog-inner #subscribe #notifyMe {
		margin-top:1em;
	}
	
	.dialog .dialog__content .dialog-inner #subscribe #notifyMe .form-group button.submit {
		font-size:80%;
		line-height:1;
	}
	
	.dialog .dialog__content .dialog-inner #subscribe .block-message {
		padding:8px;
	}
	
	.dialog .dialog__content .dialog-inner #subscribe p.notify-valid {
		font-size:12px;
	}
	
	.pswp__top-bar, .pswp__caption {
		background:rgba(32, 35, 45, 0.9);
	}
	
	.pswp__caption h4 {
		font-size:15px;
	}
	
	.pswp__caption p {
		font-weight:300;
	}
}