/* =================================================================== 
 *
 *  Howdy v1.0 Main Stylesheet
 *  08-13-2016
 *  ------------------------------------------------------------------
 *
 *  TOC:
 *  01. webfonts and iconfonts
 *  02. base style overrides
 *  03. typography & general theme styles
 *  04. forms 
 *  05. buttons
 *  06. other components
 *  07. common and reusable styles
 *  08. header styles
 *  09. home
 *  10. about
 *  11. skills
 *  12. credentials
 *  13. portfolio
 *  14. stats
 *  15. contact
 *  16. footer
 *
 * =================================================================== */


/* ===================================================================
 *  01. webfonts and iconfonts - (_document-setup)
 *
 * ------------------------------------------------------------------- */
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500&display=swap');
 body{font-family: 'Roboto', sans-serif;}
 strong,b,.section-intro h1, .section-intro h3{font-family: 'Roboto', sans-serif;}
 strong, b{font-weight: bold;}
 .bricks-wrapper .item-wrap .overlay{cursor: pointer;}
 input, textarea, select, pre, blockquote, figure, table, p, ul, ol, dl, form, .fluid-video-wrapper, .ss-custom-select {
    margin-bottom: 1rem;
}

#portfolio {
    background: #EBEBEB;
    min-height: 800px;
    position: relative;
    padding: 1.5rem 0 15rem;
    margin-top: 8rem;
}

#portfolio .bricks-wrapper .brick{float:none; width:100%;}

.bricks-wrapper{height:auto !important}

.breadcrum{margin:10px auto; text-align: center; font-size: 12px;}
.breadcrum a{color:rgb(34, 34, 34);}
.breadcrum a:hover{color:000; text-decoration:underline}

.item-wrap{border:none !important}


/*Columns*/
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 600px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_2_of_2, .span_1_of_2, .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}