/*
CSS Style build for NuTastic.net
By NuTastic Designz -Jarmell James
www.nutastic.net 2012

FONTS
font-family: 'Raleway', sans-serif;
font-family: 'Archivo Narrow', sans-serif;
font-family: 'Oswald', sans-serif;

COLORS
Red: #a61c1c
Orange: #cd9933
/*

/*FONTS
-----------------------------*/
@import url(http://fonts.googleapis.com/css?family=Raleway|Archivo+Narrow|Oswald:400,700);
/*-----------------------------
GENERAL STYLING BEGINS*/
html,body {
	margin:0px !important;
	padding:0;
}

body{
	font-family: sans-serif;
	font-size:12px;
	color:#444;
	background:#fff;
	font-weight:400;
	-webkit-font-smoothing: antialiased;
}

/*Mobile CSS*/
.container, .container2{ margin:0px 2%; width:96%; clear:both; height:auto; }
.container:after, .container2:after { content:"\0020"; display:block; height:0; clear:both; visibility:hidden;}
#header { height:50px; width:100%; float: left; background:#ffffff; border-bottom:1px solid rgba(150, 150, 150, 0.3); }
#footer { width:100%; float:left; height: auto; color:#666; font-size:15px; margin:10px 0px 0px; text-align:center; font-weight:400; }
.footerLinks{ margin:0px 10% 10px; padding:8px 5%; width:70%; clear:both; height:auto; background:#555555; background:rgba(50,50,50,0.5); color:#cccccc; text-align:center; font-size:15px; font:bold; float:left; }
.footerLinks a:link, .footerLinks a:visited, .footerLinks a:active{color:#cccccc};
.footerLinks a:hover{color:#cccccc; background:#666666; background:rgba(50,50,50,0.8)} 
#pageTitle{ margin-top:12px; font-size:18px; font-family:'Oswald', sans-serif; text-align:left; color:#a61c1c; font-weight:400;}
#menu{ width:100%; height:100px; float:left; background:#323232; padding:15px 0px; display:none; }
.menuNav{ width:26%; padding:8px 2%; height:84px; margin-right:5%; float:left; text-align:center; background-color:#999999; background-color:rgba(0,0,0,0.3); background-size:contain; background-position:center; background-repeat:no-repeat; }
.menuEnd{ margin-right:0px;}
.menuNav:hover{ background-color:rgba(0,0,0,0.1); }
.menuNav img{width:100%; height:84px; border:none;}
.btn_hm{ width:60px; height:40px; margin:5px 0px; background:url(/mobilesite/images/general/icon_hm.png) no-repeat center; float:right; background-color:#a61c1c;}
.btn_mn{ width:60px; height:40px; margin:5px 0px; background:url(/mobilesite/images/general/icon_menu.png) no-repeat center; float:right; margin-left:10px; background-color:#a61c1c;}
.btn_hm:hover, .btn_mn:hover{background-color:#323232;}
.btn_menu{ width:60px; height:40px; border:none;}
.footerIcons{ font-size:14px; }
.footerIcons .icon-stack{ margin-left:5px; margin-right:5px; }

/*General*/
#link_w{ background-image:url(/mobilesite/images/general/link_web.png); }
#link_d{ background-image:url(/mobilesite/images/general/link_des.png); }
#link_s{ background-image:url(/mobilesite/images/general/link_show.png); }
.left3{ width:31%; float:left; padding-left:2%; height:auto;}
.mid3{ width:34%; float:left; height:auto;}
.right3{ width:31%; float:left; padding-right:2%; height:auto;}
.left2{ width:48%; float:left; padding-left:2%; height:auto;}
.right2{ width:48%; float:left; padding-right:2%; height:auto;}
#topBG{ float:left; width:100%; height:auto; background-position:center; background-repeat:no-repeat; background-size:cover;}
#redBG{ float:left; width:100%; height:auto; background:#a61c1c; border-top:1px #600 solid; padding:25px 0px; }
.redBG{ float:left; width:100%; height:auto; background:#a61c1c; border-top:1px #600 solid; padding:25px 0px; }
#blackBG{ float:left; width:100%; background:#323232 url(/images/general/bgs/bottomBG.jpg) repeat; padding:20px 0px; border-top:1px #000 solid; }
#stripBG{ float:left; width:100%; background:#dddddd; border-top:1px #600 solid; padding:12px 0px; }
.pageInfo{ float:left; width:96%; text-align:right; padding:2% 2% 0px; color:#fff; font-size:16px;}
.pageInfo a:hover{color:#cccccc;}

/*HOME*/
#slidesRef{ width:100%; height:auto; }
.portImage{ width:30%; float:left; margin-right:5%; text-align:center; margin-bottom:25px; }
.pIE{ margin-right:0px; }
.blogPreviewImg{ width:80%; margin:0px 10%; float:left; background:#999999; border-radius:15px; }
.left2x{ width:46%; float:left; padding-left:2%; padding-right:2%; height:auto; display:none;}
.right2x{ width:46%; float:left; padding-right:2%; height:auto; display:none;}
#smallShow{ display:block; }
.showInfo{ float:left; width:96%; text-align:right; padding:2%; color:#333; font-size:14px;}
.showImage{ text-align:left;}
.showPort{ border:2px solid rgba(100, 100, 100, 0.30); width:95%; }
.showButtons{ width:970px; height:30px; text-align:center; float:left; margin-top:30px; position:relative; z-index:100; }
.ft_social{ width:24%; margin-right:1%; float:left; }
.ftsE{ margin-right:0px;}

/*DESIGNZ*/
.thumbd{ cursor:pointer; float:left; width:33.33%; }
#topBGDes{ float:left; width:100%; height:auto; background-position:center; background-repeat:no-repeat;}
#redBGDes{ float:left; width:100%; height:auto; background:#a61c1c; border-top:1px #666 solid; padding:0px 0px 15px; }
#stripBGDes{ float:left; width:100%; height:auto; background:#ddd; border-top:1px #600 solid; padding:10px 0px 20px; }
#portBGDes{ width:100%; margin:0px 0px 20px; height:auto;}
#webdesign{ width:90%; margin-top:3px; }
#webdesignTitle{ height:auto; font-size:18px; width:96%; margin:5px 2%; float:left; color:#555555; text-align:center; margin-top:8px; text-transform:uppercase; font-family:'Oswald', sans-serif; }
#webdesignTitle2{ height:auto; font-size:15px; width:98%; margin:5px 1%; float:left; color:#555555; text-align:center; margin-top:0px; margin-bottom:5px; }
#webdesignTitle3{ height:auto; font-size:15px; width:98%; margin:5px 1%; float:left; color:#555555; text-align:center; margin-top:5px; margin-bottom:8px; }

/*SHOWCASE*/
#blogButtons{ height:30px; text-align:center; margin:5px 5%; width:90%; float:left; }

/*SHOWBLOG*/
.blogHeaderL, blogHeaderR{ width:100%; float:left; font-weight:400; text-align:center; }
.blogContainer{ padding-top:10px; text-align:center; width:100%; margin:0px;}
.blogColumn{ width:100%; float:left; }
.blogColumnEnd{ margin-right:0px; }
.blogTile{ background:#990000; float:left; width:50%; height:auto; }
.blogButton{ display:inline-block; font-size:12px; color:#fff; background:#bf2121; text-align:center; padding:10px 8px; margin-right:3px; margin-left:3px; border-radius:4px; }
.blogButton:hover{ background:#880000; }
.divider{ margin:12px 0px;; border-bottom:1px dashed #bf2121; float:left; width:100%; }
.postTitle{ text-align:center; line-height:36px; text-transform:none !important; color:#fff !important;}
.postDate{ text-align:center; font-weight:700; -webkit-font-smoothing: antialiased; font-size:15px; color:#fff; }
.postInfo{ text-align:left; float:left; width:96%; margin:0px 2%; }
.postInfo iframe{ width:98%; height:260px; margin:0px 1% 10px; }
.postMainImg{ width:80%; margin-bottom:5px; border-radius:4px; }
.postThumb{ width:50px; height:50px; display:inline-block; border-radius:60px; border:3px solid #ffffff; background-position:center; background-size:cover; background-repeat:no-repeat; margin:8px; }
.relatedPost{ width:90%; margin:8px 2% 10px; background:#bf2121; color:#ffffff; display:inline-block; padding:10px 3%; height:auto; border-radius:4px; overflow:hidden; font-size:16px; text-align:left; float:right; }
.relatedPost img{ float:left; width:40%; height:auto; margin-right:8px; border-radius:4px; }
.relatedPost:hover{ background:#880000; }
#relatedSection{ float:right; width:100%; }
#comments{width:96%; margin:0px 2% 10px; display:inline-block; float:left; padding:0px 0px 0px 0px;}

/*ABOUT AND CONTACT*/
#contactBox{ float:left; width:560px; margin-left:5px; margin-top:5px; border:none; background:url(/mobilesite/images/general/bgs/black_top.jpg) repeat; height:410px; padding:10px 20px; }

#portList a{width:90%; float:left; height:auto; background:rgba(100,0,0,0.2); display: block; margin-bottom: 10px; padding:5px 5%;}
#portList a:link, #portList a:visited, #portList a:active{ color:#c90; }
#portList a:hover{ color:#c90; }


/*Text*/
.words1{ color: #fff; font-size:16px; text-align:left; }
.words2{ color: #fff; font-size:16px; text-align:left; }
.words3{ color: #fff; font-size:16px; text-align:left; }
.title1{ font-family: 'Oswald', sans-serif; color:#fff; font-size:20px; }
.title2{ font-family: 'Oswald', sans-serif; color:#fff; font-size:20px; text-transform:uppercase; }
.title3{ font-family: 'Oswald', sans-serif; color:#a61c1c; font-size:30px; text-transform:uppercase; }
.bigWords{font-family: 'Oswald', sans-serif; color:#323232; font-size:40px; line-height:45px; }
h1{ font-family:'Oswald', sans-serif; font-size:24px; line-height:28px; color:#fff; font-weight:400; margin:0px 0px 10px; }

/*Common Link*/
a:link { color: #F90; text-decoration: none; }
a:visited { text-decoration: none; color: #F90; }
a:hover { text-decoration: none; color: #990000; }
a:active { text-decoration: none; color: #F90; }

/*Common*/
.noBorder{ border:none; }
.hide{ display:none; }
.clear{ clear:both;}
.clear2{ clear:both; height:5px; }
.clear3{ clear:both; height:10px; }
.clear4{ clear:both; height:30px; }
.corners{ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.corners2{ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
.shadow { -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, .06); -moz-box-shadow:0 2px 5px rgba(0, 0, 0, .06); box-shadow:0 2px 5px rgba(0, 0, 0, .06); }
.shadowIn{
	-moz-box-shadow: inset 0px 60px 150px 105px rgba(0, 0, 0, 0.05);
	-webkit-box-shadow: inset 0px 60px 150px 105px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0px 60px 150px 105px rgba(0, 0, 0, 0.05);
}
.shadowIn2{
	-webkit-box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.3);
	box-shadow: inset	0px 0px 15px rgba(0, 0, 0, 0.3);
}
.shadowThin{
	-webkit-box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.08),inset 1px 1px 0px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 1px 1px 0px rgba(255,255,255, 0.08),inset 1px 1px 0px rgba(0,0,0, 0.08);
	box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.08),inset 1px 1px 0px rgba(0, 0, 0, 0.08);
}

/*Screen Variating CSS*/
/* Smartphones (portrait and landscape) ----------- 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 760px) {
#topBG{ float:left; width:100%; height:auto; background-position:center; background-repeat:no-repeat; background-size:cover;}
#topBGDes{ float:left; width:100%; height:auto; background-position:center; background-repeat:no-repeat;}
#slidesRef{ width:80%; height:180px; margin:20px 10%; }
.portImage{ width:28%; float:left; margin-right:8%; text-align:center; margin-bottom:25px; }
.pIE{ margin-right:0px; }
#showPort{ border:2px solid rgba(100, 100, 100, 0.30); width:95%; }
.left2x{ display:none;}
.right2x{ display:none;}
#smallShow{ display:block; }
.container2{ margin:0px 5%; width:90%; clear:both; height:auto; }
#webdesign{ height:180px; margin-top:3px; }
#webdesignTitle{ height:auto; font-size:14px; text-align:center; margin-top:3px; text-transform:uppercase; }
.thumbd{ cursor:pointer; float:left; width:32%; }
#webdesignTitle2{ height:auto; font-size:12px; color:#555555; text-align:center; margin-top:2px; }
#portBGDes{ width:98%; margin:15px 1% 20px; height:auto; padding:0px 2%;}
}
*/

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
#topBG{ float:left; width:100%; height:500px; background-position:center; background-repeat:no-repeat; background-size:cover;}
#topBGDes{ float:left; width:100%; height:500px; background-position:center; background-repeat:no-repeat;}
#slidesRef{ width:80%; height:400px; margin:50px 10%; }
.portImage{ width:15%; float:left; margin-right:1%; text-align:center; margin-bottom:25px; }
.pIE{ margin-right:1%; }
#showPort{ border:2px solid rgba(100, 100, 100, 0.30); width:75%; }
.left2x{ width:46%; float:left; padding-left:2%; padding-right:2%; height:auto; display:block;}
.right2x{ width:46%; float:left; padding-right:2%; height:auto; display:block;}
#smallShow{ display:none; }
#ftShow{ display:none;}
.container2{ margin:0px 15%; width:70%; clear:both; height:auto; }
#webdesign{ height:350px; margin-top:20px; }
#webdesignTitle{ height:auto; font-size:18px; text-align:center; margin-top:40px; text-transform:uppercase; }
.thumbd{ cursor:pointer; float:left; width:20%; }
#webdesignTitle2{ height:auto; font-size:16px; color:#555555; text-align:center; margin-top:4px; }
#portBGDes{ float:left; width:100%; height:auto; margin:0px; padding:0px;}
}*/

/* iPads (landscape) ----------- 
@media only screen 
and (min-width : 760px){
#topBG{ float:left; width:100%; height:500px; background-position:center; background-repeat:no-repeat; background-size:cover;}
#topBGDes{ float:left; width:100%; height:500px; background-position:center; background-repeat:no-repeat;}
#slidesRef{ width:80%; height:400px; margin:50px 10%; }
.portImage{ width:15%; float:left; margin-right:1%; text-align:center; margin-bottom:25px; }
.pIE{ margin-right:1%; }
#showPort{ border:2px solid rgba(100, 100, 100, 0.30); width:75%; }
.left2x{ width:46%; float:left; padding-left:2%; padding-right:2%; height:auto; display:block;}
.right2x{ width:46%; float:left; padding-right:2%; height:auto; display:block;}
#smallShow{ display:none; }
.container2{ margin:0px 25%; width:50%; clear:both; height:auto; }
#webdesign{ height:350px; margin-top:20px; }
#webdesignTitle{ height:auto; font-size:20px; text-align:center; margin-top:40px; text-transform:uppercase; }
.thumbd{ cursor:pointer; float:left; width:20%; }
#webdesignTitle2{ height:auto; font-size:16px; color:#555555; text-align:center; margin-top:4px; }
#portBGDes{ float:left; width:100%; height:auto; margin:0px; padding:0px;}
}
*/

/* Desktops and laptops ----------- 
@media only screen 
and (min-width : 1224px) {
#topBG{ float:left; width:100%; height:500px; background-position:center; background-repeat:no-repeat; background-size:cover;}
#topBGDes{ float:left; width:100%; height:500px; background-position:center; background-repeat:no-repeat;}
#slidesRef{ width:80%; height:400px; margin:50px 10%; }
.portImage{ width:15%; float:left; margin-right:1%; text-align:center; margin-bottom:25px; }
.pIE{ margin-right:1%; }
#showPort{ border:2px solid rgba(100, 100, 100, 0.30); width:75%; }
.left2x{ width:46%; float:left; padding-left:2%; padding-right:2%; height:auto; display:block;}
.right2x{ width:46%; float:left; padding-right:2%; height:auto; display:block;}
#smallShow{ display:none; }
.container2{ margin:0px 25%; width:50%; clear:both; height:auto; }
#webdesign{ height:350px; margin-top:20px; }
#webdesignTitle{ height:auto; font-size:20px; text-align:center; margin-top:40px; text-transform:uppercase; }
.thumbd{ cursor:pointer; float:left; width:20%; }
#webdesignTitle2{ height:auto; font-size:16px; color:#555555; text-align:center; margin-top:4px; }
#portBGDes{ float:left; width:100%; height:auto; margin:0px; padding:0px;}
}
*/