/* info
--------------------------------------------------------
	Start:	11.3.2015.
	Name: 	BozooArt
	Author:	BozooArt, www.bozooart.com
*/


/* Reset 
----------------------------------------------- */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body { line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul { list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
ol, ul { list-style: none;  }
h1, h2, h3, h4, h5, h6 { font-size: 100%; margin: 0; font-weight: normal; font-family: "Roboto", sans-serif; }

a { color: #e52600; text-decoration: none; transition: all .2s ease; -webkit-transition: all .2s ease; }
a:hover { text-decoration: none; }
a:focus { outline: none; text-decoration: none; }

.clearfix:before,
.clearfix:after,
.row:before,
.row:after { content: " "; display: table; }
.clearfix:after,
.row:after { clear: both; }
.clearfix { clear: both; }

.row:before,
.row:after { display: table; content:" " }
.row:after { clear: both } 
.row:before,
.row:after { display: table; content:" " }
.row:after { clear: both }

@font-face {font-family: 'Archive'; src: url('font/Archive.eot'); src: url('font/Archive.eot?#iefix') format('embedded-opentype'), url('font/Archive.woff2') format('woff2'), url('font/Archive.woff') format('woff'), url('font/Archive.ttf') format('truetype'), url('font/Archive.svg#archiveregular') format('svg'); }


/* General
----------------------------------------------- */

html { margin: 0; padding: 0 !important  }
body { font: 16px/1.6em 'Roboto', Arial, Helvetica, sans-serif; color: #000; text-align: left; font-weight: 400; background: url(../images/bg-2.jpg); margin: 0; padding: 0  }
.container { padding: 0 20px; width: 1160px; margin: 0 auto; min-height: 1px;   }

h1, h2, h3 { font-family: 'Archive', sans-serif;   }
h1 { font-size: 140px; font-weight: 300; display: block; text-align: center; line-height: 1.0em; margin: 0 auto;   }
h2 {  text-transform: uppercase; font-size: 60px; font-weight: 300; text-align: center; line-height: 3em;  font-size: 60px;   }
h3 { font-size: 24px; color: #e52600; margin-bottom: 10px;   }

#header {  background: #000 url(../images/bg.jpg); color: #fff; text-align: center; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.slogan { color: #ccc; text-transform: uppercase; letter-spacing: .1em }

.view-more { margin-top: 50px;  }
.view-more a {  background: #000; padding: 15px 0; border-radius: 2px; color: #fff; text-transform: uppercase; transition: all 400ms ease; -webkit-transition: all 400ms ease; opacity: .3; display: block; width: 150px; margin: 0 auto; border: 1px solid #e52600;;   }
.view-more a:hover { 	opacity: 1; -webkit-transform: translateY(7px); -ms-transform: translateY(7px); transform: translateY(7px); background: #e52600; }

.col { float: left; width: 25%; position: relative; }
.row { margin-right: -20px; margin-left: -20px; clear: both;  }
#work .col { padding: 0 !important;  margin: 0;   }
#work .col img {  max-width: 100%; height: auto;   }

#web .col { margin: 0; width: 100%; float: none; display: flex;   }
#web .row {  display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 0; margin: 0; width: 100% }
#web .col ul { width: 80%;  }

#web .row:before, #web .row:after { display: none }

.dark { background: #000 url(../images/bg.jpg); color: #fff;  }
.dark h2 { color: #fff;  }

#work, 
#web { padding-bottom: 60px; height: calc(100vh-60px);   }

#web .container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh }

#contact { text-align: center; display: flex; justify-content: center; align-items: center; height: 100vh; background: #000 url(../images/bg.jpg);   }
#contact h2 { color: #fff;  }
#contact li { margin-bottom: 20px; font-size: 22px; font-weight: 300; color: #fff;     }
#contact li strong { font-size: 26px;  }
#contact li a:hover { text-decoration: none; border-bottom: 3px solid #e52600 }

#web ul { margin-bottom: 30px;  }
#web li {  font-size: 14px; border-bottom: 1px solid rgba( 256 256 256 / .05); padding: 4px 0 0 10px  }
#web li a { color: #999; padding: 0;  }
#web li.cool a { color: #fff; }
#web li a:hover  { color: #fff;}
#web li.cool a:hover { color: #e52600; }

#web .featured { text-align: center; margin: 0 0 30px;  padding-bottom: 30px;   }
#web .featured li { border: none !Important; padding: 5px 0 ; display: inline; margin-right: 70px;  }
#web .featured li a { color: #e52600; font: 20px 'Archive', sans-serif; display: inline-block; padding: 10px 0  }
#web .featured li a:hover { color: #fff; text-shadow: 0 0 20px #fff;  }
#web .featured li a:after { content: ''; width: 20px; height: 20px; background-image: url(../images/right.svg); background-size: 100%; position: absolute; margin: 2px 0 0 20px;  opacity: .1; transition: all .2s ease; -webkit-transition: all .2s ease; }
#web .featured li:hover a:hover:after { opacity: 1;  -webkit-transform: translateX(7px); -ms-transform: translateX(7px); transform: translateX(7px); }

#contact a:hover { color: #e52600; border-bottom: 1px solid #e52600;  padding-bottom: 2px;  }

.thumb a, 
.thumb a img { display: block; position: relative; color: #fff; } 
.thumb a {overflow: hidden; } 
.thumb a div { position: absolute; background: #333; background: rgba(0,0,0,0.9); width: 90%; height: 90%; color: #999; padding: 5%;   } 
.about { display: block; text-transform: lowercase;  }
.cof { color: #000; margin-top: 20px; display: block; background: #fff; display: inline-block; padding: 5px 0; width: 100px; text-align: center; border-radius: 4px;   }
.awww { color: #e5c200; margin-top: 20px; display: block; background: #e5c200; color: #fff; display: inline-block; padding: 5px 0; width: 100px; text-align: center; border-radius: 4px;   }
.ghost { visibility: hidden;  }

/* Animate
----------------------------------------------- */
.animated {-webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated.infinite {-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.animated.hinge {-webkit-animation-duration: 2s; animation-duration: 2s; }


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

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



@-webkit-keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 
	100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 
}

@keyframes fadeInDown {
	0% {opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 
	100% {opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 
}
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }



@-webkit-keyframes fadeInLeft { 
	0% {opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 
	100% {opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 
}

@keyframes fadeInLeft {
	0% {opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 
	100% {opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 
}
.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }



@-webkit-keyframes fadeInRight {
	0% {opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 
	100% {opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 
}

@keyframes fadeInRight {
	0% {opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 
	100% {opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 
}
.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }



@-webkit-keyframes fadeInUp {
	0% {opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 
	100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 
}
@keyframes fadeInUp {
	0% {opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 
	100% {opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }



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

@media(max-width:1200px) {

	.container { width: 1000px; }

}


@media(max-width:991px) {

	.container { width: 750px; }
	h3 { font-size: 20px;  }
	.text-inner { font-size: 14px; line-height: 1.3em;   }
		#web .row {  display: grid; grid-template-columns: repeat(2,1fr);

}

@media(max-width:767px) {

	h1 { font-size: 100px;  }
	h2 { font-size: 40px;  }
	.container { width: 600px; }
	.col { width: 50% }


}


@media(max-width:638px) {
	h1 { font-size: 70px;  }
	h2 { font-size: 30px;  }
	.container {  }
	.col { width: 50%;  } 
	.container { width: auto; padding: 0 20px;  }
	#web .featured li { display: block; margin-right: 0px;  }

}


@media(max-width:474px) {
  
	h1 { font-size: 50px; visibility: visible !important  }
	.col { width: 100%;  } 
	.col img { width: 100% }

.thumb a div { position: static;  }
	#web li  { font-size: 15px;  }
	#web .featured li { text-align: left;  }
.view-more a { opacity: .5 }
		#web .row {  display: grid; grid-template-columns: repeat(1,1fr);
	
}