/*--------------------------
RESET

Shared on www.MafiaShare.net
---------------------------*/
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
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}
article, aside, details, figcaption, figure, footer, 
header, hgroup, menu, nav, section{display:block}

table{border-collapse:collapse; border-spacing:0}
fieldset, img{border:0}
address, caption, cite, dfn, th, var{font-style:normal; font-weight:normal}
caption, th{text-align:left}
h1, h2, h3, h4, h5, h6{ font-size:100%; font-weight:normal;}
q:before, q:after{content:''}
abbr, acronym{border:0}

/*--------------------------
GLOBAL
---------------------------*/
html { overflow-y:scroll;}
body { background:#fafafa; font-family: 'Open Sans', sans-serif; font-weight:300;}

.clearfix:after{ content:"";  display:block;  clear:both;  visibility:hidden;  line-height:0;  height:0}
.clearfix{ display:inline-block }
html[xmlns] .clearfix{ display:block}
* html .clearfix{ height:1%}
.fl{ float:left; }
.fr{ float:right; }
.icon_left{ float:left; margin-right:10px;}

a img {border:0; }
a, a:link{ color:#f04883; text-decoration:none; }
a:hover{ color:#f04883; text-decoration:none; }
::selection {background: rgb(247,130,171); color:#fafafa;}
::-moz-selection {background: rgb(247,130,171); color:#fafafa;}
img::selection {background: transparent;}
img::-moz-selection	{background: transparent;}


h1, h2, h3, h4, h5, h6{ margin:0px 0 20px 0; color:#373737; font-family: 'Open Sans', sans-serif; font-weight:300;}
h1{ font-size:24px; }
h2{ font-size:20px; }
h3{ font-size:18px; }
h4{ font-size:16px; }
h5{ font-size:12px; }
h6{ font-size:10px; }

ul, ol{ margin-bottom:20px; }
ul, ol,{ margin-left:20px; font-size:12px;}
p, span, small, li{ font-size:12px; line-height:22px;}
p{ color:#8a8a8a; margin-bottom:20px !important;}

figure, img {max-width:100%; height:auto; margin-bottom:20px;}
img.left {margin:0 20px 0 0; float:left; }
img.right {margin:0 0 0 20px; float:right;}
img.center {  display: block; margin-left: auto; margin-right: auto; }
object, embed, video{max-width:100%; height:auto}


.video-container { position: relative; padding-bottom: 45%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom:23px; }

.video-container iframe,  
.video-container object,  
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.aligncenter{ text-align:center; }
.alignleft{ text-align:left; }
.alignright{ text-align:right; }

/*--------------------------
COLUMN
---------------------------*/
.whole{ width:100%; float:left; margin-bottom:40px;}
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
.one-half{ width:48.2%; float:left; margin-left:3.5%; margin-bottom:40px;}
.one-third{  width:31.1%; float:left; margin-left:3.2%; margin-bottom:40px; text-align:center;}
.one-fourth{ width:22.5%; float:left; margin-left:3%; margin-bottom:40px;}
.three-fourth{ width:73.7%; float:left; margin-left:3.5%; margin-bottom:40px;}
.one-fifth{ width:17%; float:left; margin-left:3.5%; }

/*--------------------------
LAYOUT
---------------------------*/

#page_wrap{ margin: 0 auto;  max-width: 60em; padding:0;  /* 988px / 16px = 61.75em */}
#page_wrap{ padding-top:30px; }

/*-------------*/
/*   CONTENT   */
/*-------------*/
h1.logo{ width:100%; height:61px; float:left;  text-indent:-999999px; margin-bottom:20px; border-bottom:1px solid #e1e1e1; padding-bottom:20px;}
h1.logo a{ width:84px; height:61px; display:block; background:url(../images/logo.png) no-repeat;}

h2.choose{ font-size:24px; width:100%; text-align:center;}

ul.color{  width:100%; float:left; }
ul.color li{ float:left; width:30px; height:30px; list-style:none; margin-right:10px;}
ul.color li a{ float:left; width:30px; height:30px; }
ul.color li a:hover{ opacity:.9;}
ul.color li a.pink{ background:#f04883;}
ul.color li a.orange{ background:#eb5f00;}
ul.color li a.red{ background:#ed4141;}
ul.color li a.yellow{ background:#ffa800;}
ul.color li a.blue{ background:#0c9aeb;}
ul.color li a.green{ background:#99cc99;}
ul.color li a.lightyellow{ background:#f0d8be;}
ul.color li a.lightblue{ background:#adcce8;}

.first{ margin-left:0 !important;}

@media handheld and (max-width: 600px), screen and (max-device-width: 600px), screen and (max-width: 768px)  {
#page_wrap, #header_wrap, #footer_wrap{ padding:0 40px;}	

#page_wrap{ padding-top:120px; }

.content{ width:100%; float:left;}
.sidebar{ width:100%; float:left; }

nav ul{ display:none;}
nav select {  display: block; float:right; width:40%; margin:20px 0 30px 30px; padding:7px 10px; border:1px solid #f3f3f3; }

.crumbs span{ display:none;}
.crumbs h2{ margin-bottom:20px;}
.breadcrumbs span{ display:none;}

.feedback-wrap .dvision .feedback{ width:100%; float:left;}
.feedback-wrap .dvision .feed2{ width:100%; float:left;}
.feedback-wrap .dvision .feed3{ width:100%; float:left;}
.feedback-wrap .dvision .feedback div{ width:87% !important;}

#works-container .element-item{ width:195px !important; height:178px !important;}

.one-half{ width:100%; float:left; margin-left:0;}
.one-third{  width:100%; float:left; margin-left:0;}
.one-fourth{ width:100%; float:left; margin-left:0;}
.three-fourth{ width:100%; float:left; margin-left:0%;}
.one-fifth{ width:100%; float:left; margin-left:0;}

section.blog-entry .thumb-blog{ width:31.1%; float:left; margin-left:3.2%;}

.portfolio3 .one-third{ width:31.1%; float:left; margin-left:3.2%;}
div.first{ margin-left:0;}
}

@media handheld and (max-width: 479px), screen and (max-device-width: 479px), screen and (max-width: 479px)  {
#page_wrap, #header_wrap, #footer_wrap{ padding:0 40px;}	

#page_wrap{ padding-top:130px; }

nav select {  display: block; float:right; width:50%;}

article img{ float: none; margin-right:0;}

.feedback-wrap .dvision .feedback{ width:100%; float:left;}
.feedback-wrap .dvision .feed2{ width:100%; float:left;}
.feedback-wrap .dvision .feed3{ width:100%; float:left;}
.feedback-wrap .dvision .feedback div{ width:100% !important;}
.feedback-wrap .dvision .feedback div h4{ float: none; margin-bottom:0;}
.feedback-wrap .dvision .feedback div span{ float:left; margin-bottom:20px;}

section.blog-entry .thumb-blog{ width:100%; float:left; margin-left:0%;}
.portfolio3 .one-third{ width:100%; float:left; margin-left:0%;}
	
.one-half{ width:100%; float:left; margin-left:0;}
.one-third{  width:100%; float:left; margin-left:0;}
.one-fourth{ width:100%; float:left; margin-left:0;}
.three-fourth{ width:100%; float:left; margin-left:0%;}
.one-fifth{ width:100%; float:left; margin-left:0;}
div.first{ margin-left:0;}

}

/*---MOBILE STYLE---COMPATIBILITY----*/
@media handheld and (max-width: 600px), screen and (max-device-width: 600px), screen and (max-width: 600px){
}
@media handheld and (max-width: 515px), screen and (max-device-width: 515px), screen and (max-width: 515px){
}
@media handheld and (max-width: 320px), screen and (max-device-width: 320px), screen and (max-width: 320px){
}
@media handheld and (max-width: 295px), screen and (max-device-width: 295px), screen and (max-width: 295px){
}
@media handheld and (max-width: 240px), screen and (max-device-width: 240px), screen and (max-width: 240px){
}