/* 1. Hyperlinks*/
a					{color: #333; text-decoration:none;
					-webkit-transition:all .5s ease;
					-o-transition:all .5s ease;
					transition:all .5s ease;}
a:hover				{color: #009FDF;}

/* 2. Clearfix*/
.clearfix:after		{clear:both;}
.clearfix			{zoom:1}

/* 3. Structure*/
body				{background:#fff; color:#555;
					font-family: 'Exo 2', sans-serif; font-size: 18px;
					line-height: 1.9; margin: 0 auto;}
.wrapper			{margin:0 auto; max-width:1900px; text-align:center;}

a img				{border:none;}
img					{max-width: 100%; vertical-align: middle;}

container			{display:inline-block; width:100%; padding-top:115px;}
content_1,content_2	{display:inline-block; margin:0 auto; text-align:center; max-width:1300px;}
content_1			{ /* Safari */     
					display:-webkit-box;     
					display:-ms-flexbox;     
					display:flex; /* Standard syntax */
					padding-bottom:35px;}
					
main				{display:inline-block; text-align:justify; max-width:1300px; margin:0 auto;}

/* 4. Header*/
header				{background:#fff;
					border-bottom:3px solid #eee;
					display:block;
					margin: 0 auto;
					position:fixed;
					text-align:center;
					width:100%;
					z-index:99;}
.logo_container		{width:inherit;}	
#Logo				{-webkit-transition:width .5s ease; -o-transition:width .5s ease; transition:width .5s ease;}
.largeLogo			{width:365px;}
.smallLogo			{width:250px;}

/* 5. Menu*/
nav					{display:inline-block;
					margin: 0 auto;
					width:100%;}
nav ul 				{font-size:0;
					margin:0 auto;
					padding:0;
					width:100%;}
nav li 				{display:inline-block;
					font-size:17px; font-weight:600;
					letter-spacing:1px;
					padding:2px 1.85% 5px;
					text-transform: uppercase;}
.sidebarIconToggle, input[type=checkbox] {display:none;}
					
/* 6. Brackets */
.cl-effect-1 a::before,
.cl-effect-1 a::after {font-weight:400;
					display:inline-block;
					position:relative;
					font-size:23px;
					top:2px;
					opacity:0;
					-webkit-transition:-webkit-transform .5s, opacity .5s;
					-moz-transition:-moz-transform .5s, opacity .5s;
					transition:transform .5s, opacity .5s;}
.cl-effect-1 a::before {margin-right:7px;
					content: '[';
					-webkit-transform:translateX(14px);
					-moz-transform:translateX(14px);
					transform:translateX(14px);}
.cl-effect-1 a::after {margin-left:7px;
					content: ']';
					-webkit-transform:translateX(-14px);
					-moz-transform:translateX(-14px);
					transform:translateX(-14px);}
.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
					opacity:1;
					-webkit-transform:translateX(0px);
					-moz-transform:translateX(0px);
					transform:translateX(0px);}

/* 7. Titles*/
h1					{color:#009FDF;
					font-family: 'Audiowide', sans-serif;
					font-size:61px;
					line-height:1.5;
					font-weight:300;	
					margin:0 auto;
					display:inline-block;
					position:relative;
					text-align:center;
					width:100%;}
h2					{color:#fff;
					font-family: 'Audiowide', sans-serif;
					font-size:36px;
					font-weight:300;
					margin:0;
					padding:5px 0;
					text-align:center;}
h3					{color:#009FDF;
					font-family: 'Audiowide', sans-serif;
					font-size:36px;
					font-weight:300;
					margin:0;
					text-align:center;}
h4					{font-size:20px;
					margin:-50px 0 10px;
					padding-top:140px;
					text-align:center;}

price				{color:#009fdf;
					float:left;
					font-family: 'Audiowide', sans-serif;
					font-size:48px;
					font-weight:300;
					margin:0;
					position:relative;
					text-align:center;
					width:100%;
					line-height:0.9;
					padding-bottom:8px;}
path 				{font-size:13px; position:relative; text-align:right; width:1300px; display:inline-block; margin:0 auto;}
.textlink, .weblink	{color:#009fdf; font-weight:600;}
.weblink:hover		{color:#000;}

/* 8. Content*/
.hidden_text 		{color:white;
					font-size:20px;
					position:absolute;
					top:37%;
					bottom:37%;
					left:5%;
					right:5%;
	  				-webkit-transform:translate(-37%, -5%, -37%, -5%);
                    -ms-transform:translate(-37%, -5%, -37%, -5%);
                    transform:translate(-37%, -5%, -37%, -5%);
					text-align:center;
		  			cursor:pointer;
					line-height:1.2;
					opacity:0;}
					
.hidden_title		{font-family: 'Audiowide', sans-serif; font-size:27px;}	

.random_container	{max-width:1300px; padding-bottom:25px; display:inline-block; text-align:center; line-height:1.2;}

.randomItem			{border:none;
					position:relative;
					display:inline-block;
					margin:1px;
					overflow:hidden;
					width:32%;
					-webkit-transition:all .3s;
					-o-transition:all .3s;
					transition:all .3s;
					background:#009fdf;}
					
.randomImage		{display:block;
					height:100%;
					width:100%;
					-webkit-transition:all .5s;
					-o-transition:all .5s;
					transition:all .5s;
					opacity:1;}
					
.randomItem:hover  .randomImage
					{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3); opacity:0;}
.randomItem:hover .hidden_text
					{opacity:1; z-index:0;}

skills				{display:inline-block; background: #009fdf; color:#fff; font-size:17px; width:100%; margin:0 auto; text-align:center;}

.digital			{text-align:center; max-width:1300px; margin:0 auto;}

.frame_landscape	{display:inline-block; margin: 0 auto; max-width:750px;}
.frame_portrait		{display:inline-block; margin: 0 auto; max-width:450px;}
.cushion			{display:inline-block; margin: 0 28%;}
div#preload			{display: none;}
	

/* 9. Lists */
.se					{max-width:1300px; margin:0 auto; display:block; padding-bottom:15px;}
.item				{width:33%; display:inline-block; padding: 0 0 14px 0;}
.item_full			{width:100%; display:inline-block; padding: 0 0 14px 0;}
ul					{list-style:none;}
ul.blue li:before	{color:#009FDF;
					content:"\25A0";
					display:inline-block;
					line-height:2.2;
					margin-left:-2em;
					width:2em;}

/* 10. Buttons */
.button_container	{bottom: 0;
					display:inline-block;
					height:43px;
					position:absolute;
					width:100%;}
.button				{background:url(../img/button_bg.png);
					border:0;
					color:#fff;
					display:block;
					font-family: 'Audiowide', sans-serif;
					font-size:16px;
					font-weight:600;
					height:43px;
					letter-spacing:1.5px;
					line-height:2.7;
					overflow:hidden;
					position:relative;
					text-align:center;
					text-transform:uppercase;
					-webkit-transition:.6s all ease-in-out .1s;
					-o-transition:.6s all ease-in-out .1s;
					transition:.6s all ease-in-out .1s;
					width:250px;}

.button:hover		{background:url(../img/button_over.png);
					color:#009fdf;
					-webkit-transition:.6s all ease-in-out .1s;
					-o-transition:.6s all ease-in-out .1s;
					transition:.6s all ease-in-out .1s;}					

/* 13. Thumbnails gallery */

.thumb				{padding:0;
					text-align:center;
					width:100%;}
.thumbItem			{display:inline-block;
					font:0;
					margin:1.0%;
					overflow:hidden;
					width:16.95%;}
.thumbImage			{display:block;
					height:100%;
					width:100%;
					-webkit-transition:all .5s;
					-o-transition:all .5s;
					transition:all .5s;}
.thumbItem:hover .thumbImage{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}
					
/* 14. Footer */
footer				{display:block;
					font-size:13px;
					margin:0 auto;
					padding:0 0 4px;
					position:relative;
					top:-15px;
					text-align:center;
					width:inherit;}	
					
/* 15. Contact Form */
.form-group			{margin-bottom:2.35rem;
					position:relative;
					width:inherit;}

.form-control-placeholder {color:#009fdf;
					float:left;
					font-weight:700;
					left:0;
					padding:8px 0 0 13px;
					position:absolute;
					-webkit-transition:all 200ms;
					-o-transition:all 200ms;
					transition:all 200ms;}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
					color:#009fdf;
					font-size: 90%;
					-webkit-transform: translate3d(0, -109%, 0);
					        transform: translate3d(0, -109%, 0);}

.form-control:focus, .form-control:valid {
					background:#f6f6f6;
					border:3px solid #009fdf;}

.form-control		{border:3px solid #ddd;
					border-radius:0;
					width:500px;}

/* 16. Style inputs, select elements and textareas */
input[type=text], select, textarea{
 					border:3px solid #ddd;
					-webkit-box-sizing:border-box;
					        box-sizing:border-box;
					padding:12px;
					resize:vertical;}

/* 17. Style the submit button */
.submit 			{float:right;
					top:-25px;
					-webkit-transition:all .9s;
					-o-transition:all .9s;
					transition:all .9s;
					line-height: 1.1;}
.antispam			{display:none;}
.form				{padding-top:25px;}

/* 18. Style the submit button */
.fade-in			{-webkit-animation: fadeIn ease 4s;animation: fadeIn ease 4s;}

@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}}

@media screen and (max-width: 1470px) 	{
path				{padding:0 6%; width:88%;}
main				{width:88%; padding:0 6%;}
skills				{width:88%; padding:0 6%;}
body				{font-size: calc( 14px + (18 - 14) * ( (100vw - 320px) / ( 1220 - 320) ));}
skills				{font-size: calc( 12px + (17 - 12) * ( (100vw - 320px) / ( 1220 - 320) ));}
.page				{font-size: calc( 11px + (16 - 11) * ( (100vw - 320px) / ( 1220 - 320) ));}
h1					{font-size: calc( 32px + (49 - 32) * ( (100vw - 800px) / ( 1220 - 800) )); padding:0 6%; width:88%;}
h2					{font-size: calc( 21px + (35 - 21) * ( (100vw - 320px) / ( 1220 - 320) ));}
h3					{font-size: calc( 21px + (35 - 21) * ( (100vw - 320px) / ( 1220 - 320) ));}
.hidden_title		{font-size: calc( 18px + (27 - 17) * ( (100vw - 320px) / ( 1220 - 320) ));}
.hidden_text 		{font-size: calc( 13px + (20 - 13) * ( (100vw - 320px) / ( 1220 - 320) ));}
nav li				{font-size: calc( 14px + (16 - 14) * ( (100vw - 1020px) / ( 1350 - 1020) )); letter-spacing:0; padding:2px 1.45% 5px;}
.cl-effect-1 a::before, .cl-effect-1 a::after {font-size: calc( 18px + (23 - 18) * ( (100vw - 860px) / ( 1350 - 860) ));}}

@media screen and (max-width: 1374px) 	{
.randomItem			{width:44%;}}

@media screen and (max-width: 1100px) 	{
.cl-effect-1 a::before {margin-right:4px;
					-webkit-transform:translateX(10px);
					    -ms-transform:translateX(10px);
					        transform:translateX(10px);}
.cl-effect-1 a::after {margin-left:4px;
					-webkit-transform:translateX(-10px);
					    -ms-transform:translateX(-10px);
					        transform:translateX(-10px);}
h6					{font-size:calc( 24px + (28 - 24) * ( (100vw - 1020px) / ( 1100 - 1020) ));}}

@media screen and (max-width: 1020px) 	{
header				{height:70px;}
.logo_container		{padding:6px 6% 0 32px; text-align:left; width:88%;}	
.largeLogo, .smallLogo			{width:280px;}
container			{padding-top:74px;}
.galleryItem		{width:21%;}

/* 18. Hamburger */
nav li 				{display:block;
					padding:0;
					text-align:left;}
								
.cl-effect-1 a::before,
.cl-effect-1 a::after {color:#fff;}
				
#sidebarMenu		{background:#009fdf;
					height:100%;
					left:0;
					margin-top:18px;
					position:fixed;
					-webkit-transform:translateX(-270px);
					    -ms-transform:translateX(-270px);
					        transform:translateX(-270px);
					-webkit-transition:-webkit-transform 270ms ease-in-out;
					transition:-webkit-transform 270ms ease-in-out;
					-o-transition:transform 270ms ease-in-out;
					transition:transform 270ms ease-in-out;
					transition:transform 270ms ease-in-out, -webkit-transform 270ms ease-in-out;
					width:270px;}
.sidebarMenuInner	{border-top:1px solid rgba(255, 255, 255, 0.15);
					margin:0;
					padding:0;}
.sidebarMenuInner li{border-bottom:1px solid rgba(255, 255, 255, 0.15);
					font-size:15px;
					font-weight:600;
					letter-spacing:1px;
					list-style:none;
					padding:0px 0 4px 34px;
					text-transform:uppercase;}
.sidebarMenuInner li a{color:#fff;
					cursor:pointer;
					text-decoration:none;}
input[type="checkbox"]:checked ~ #sidebarMenu {
					-webkit-transform:translateX(0);
					    -ms-transform:translateX(0);
					        transform:translateX(0);}
input[type=checkbox] {-webkit-box-sizing:border-box; box-sizing:border-box;
					display:none;
					-webkit-transition:all .3s;
					-o-transition:all .3s;
					transition:all .3s;}
.sidebarIconToggle {
					-webkit-box-sizing:border-box;
					        box-sizing:border-box;
					cursor:pointer;
					display:block;
					height:26px;
					position:absolute;
					right:32px;
					top:26px;
					-webkit-transition:all .3s;
					-o-transition:all .3s;
					transition:all .3s;
					width:24px;
					z-index:99;}	
.spinner 			{background-color:#333;
					-webkit-box-sizing:border-box;
					        box-sizing:border-box;
					height:3px;
					position:absolute;
					-webkit-transition:all .3s;
					-o-transition:all .3s;
					transition:all .3s;
					width:100%;}
.horizontal	, .diagonal.part-2			{margin-top:5px;}
.diagonal.part-1, .horizontal, .diagonal.part-2	{-webkit-box-sizing:border-box; box-sizing:border-box;
					float:left;
					position:relative;
					-webkit-transition:all .3s;
					-o-transition:all .3s;
					transition:all .3s;}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
					-webkit-box-sizing:border-box;
					        box-sizing:border-box;
					opacity:0;
					-webkit-transition:all .3s;
					-o-transition:all .3s;
					transition:all .3s;}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
					background-color:#009FDF;
					-webkit-box-sizing:border-box;
					        box-sizing:border-box;
					margin-top:9px;
					-webkit-transform:rotate(135deg);
					    -ms-transform:rotate(135deg);
					        transform:rotate(135deg);
					-webkit-transition:all .3s;
					-o-transition:all .3s;
					transition:all .3s;}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
					background-color:#009FDF;
					-webkit-box-sizing:border-box;
					        box-sizing:border-box;
					margin-top: -11px;
					-webkit-transform:rotate(-135deg);
					    -ms-transform:rotate(-135deg);
					        transform:rotate(-135deg);
					-webkit-transition:all .3s;
					-o-transition:all .3s;
					transition:all .3s;}
.cl-effect-1 a::before, .cl-effect-1 a::after {font-size:23px;}}

@media screen and (max-width: 900px)	{
header				{height:63px;}
#sidebarMenu		{margin-top:18px;}
.sidebarIconToggle  {right:20px; top:24px;}
.sidebarMenuInner li{font-size:14px;}
.logo_container		{padding:13px 0 0 20px;}	
.largeLogo, .smallLogo	{width:200px;}
.thumbItem			{margin: 2.25%; width:27%;}}

@media screen and (max-width: 860px) {
h1					{font-size:calc( 22px + (29 - 22) * ( (100vw - 320px) / ( 860 - 450) ));}
.thumbItem			{margin:2.1%; width:26.8%;}
.item				{width:49%;}
.randomItem			{width:47%;}}

@media screen and (max-width: 600px) {
container			{padding-top:80px;}
path 				{display:none;}
ul li::before		{margin-left: -2.5em; width:2em;}
.randomItem			{width:95%;}
.snip				{display:none;}
footer				{font-size: 12px;}
.hidden_text 		{background:#009FDF;
					position:relative;
					left:0;
					right:0;
					padding-top:5px;
					width:100%;
					line-height:1.2;
					top:-8px;
					opacity:1;}
.randomItem:hover  .randomImage
					{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1); opacity:1;}
.randomItem:hover	{border-color:#eee;}
.form-control		{width:100%;}}

@media screen and (max-width: 450px) {
.item				{width:100%; padding:0 0 8px 0;}
footer				{font-size: 11px;}}