/*-----------------------------------------------
	
	COLUMN SYSTEM
	
-----------------------------------------------*/

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Removes padding behaviour on widths */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
/* Attribute selector */
[class*='bit-'] {
  float: left;
  padding: 0 2%;
}
/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
	
}
/* Clearfix */
.frame:after {
  content: "";
  display: table;
  clear: both;
}



.bit-1  {width: 8.33%;}
.bit-2  {width: 16.6666666667%;}
.bit-3  {width: 25%;}
.bit-4  {width: 33.3333333333%;}
.bit-5  {width: 41.6666666667%;}
.bit-6  {width: 50%;}
.bit-7  {width: 58.3333333333%;}
.bit-8  {width: 66.6666666667%;}
.bit-9 	{width: 75%;}
.bit-10 {width: 88.3333333333%;}
.bit-11 {width: 91.6666666666%;}
.bit-12 {width: 100%;}


/*-----------------------------------------------
	
	GENERAL CLASSES
	
-----------------------------------------------*/

body{
	background-color: #1c1c1c;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	color: #dfd7cd;
	letter-spacing: 1px;
}

.full{}

.frame{
	padding: 6% 13% 5% 13%;
	margin: 0 auto;
}

h1{
	font-size: 31px;
	font-weight: 400;
	color: #7b674c;
	margin: 0% 0 3% 0;
}

p{
	font-size: 19px;
	color: #7b674c;
	line-height: 38px;
	letter-spacing: 1px;
}

.info-container{

	padding-top: 5%;
	
}

.icon{
	float: left;
	max-width: 27px;
	max-height: 27px;
	margin-right: 4%;
}

#contact .icon{
	height: 27px;
}

.info{
	float: left;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	padding-top: 7px;
	color:#dfd7cd;
}

.numbers{
	font-family: 'Noto Sans';
}

.alert{
	padding-top: 1%;
}

.alertContent{
	padding: 2%;
	background-color: #dfd7cd;
	color: #1c1c1c; 
}	


/*-----------------------------------------------
	
	NORMAL CLASSES
	
-----------------------------------------------*/



.horizontal-list{
	float: right;
	overflow: hidden;
}

.horizontal-item{
	float:left;
}

.link{
	display: block;
	text-decoration: none;
	padding-left: 40px;
	color: #dfd7cd;
	font-size: 14px;
	-webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
    	    box-sizing: content-box;
	transition: color 1000ms ease;
}

.about{position:relative;}

.link:hover{
	color: #7b674c;
	transition: color 200ms ease;
}

.portfolio{
	background-color: #141414;
	padding: 0 1% 6% 1%;
}

.portfolio .bit-3{
	padding: 1% 1%;
}

.portfolio .frame{
	padding-bottom: 0.5%;
}

.field{
	width: 100%;
	padding: 3%;
	margin: 1% 0;
	background-color: #0d0d0d;
	font-size: 23px;
	font-weight: 400;
	letter-spacing: 3px;
	font-family: 'Raleway', sans-serif;
	color: #dfd7cd;
	border: none;
	border: 1px solid #0d0d0d;
	transition: border 800ms ease;
	text-transform:uppercase;
}

.field:focus{
	border: 1px solid #7b674c;
	outline: 0;
	box-sizing: border-box;
	transition: border 200ms ease;
}

.field[type="submit"]{
	font-weight: 700;
	float:right;
	width: 50%;
	border: 1px solid #7b674c;
	background-color: #7b674c;
	color: #0d0d0d;
	transition: all 500ms ease;
	text-transform: uppercase;
}

.field[type="submit"]:hover{
	background-color: #dfd7cd;
	border: 1px solid #dfd7cd;
	transition: all 100ms ease;
}

.field[type="submit"]:active{
	background-color: #0d0d0d;
	border: 1px solid #0d0d0d;
	color: black;
	transition: all 100ms ease;
}

.footer{
	background-color: #7b674c;
}

.copyright, .credit{
	font-size: 17px;
	font-weight: 400;
	color: #0d0d0d;
}

.credit{
	float: right;
	padding: 0.5% 2% 0 2%;
	text-transform: uppercase;
	font-size: 9px;
	font-weight: 700;
}

.credit a{
	color: #dfd7cd;
	text-decoration: none;
	transition: all 1000ms ease;
}

.credit a:hover{
	color: #0d0d0d;
	transition: all 300ms ease;
}

.menu{
	z-index: 10;
	/*background-color: #1c1c1c;*/
}

.sticky{
	position: fixed;
	top: 0;
	left:0;
	right: 0;
	padding: 3% 13% 0.3% 13%;
}

/*-----------------------------------------------
	
	SPECIFIC CLASSES
	
-----------------------------------------------*/

.logo-cimonb{
	margin-bottom: 2%;
}

.logo{
	width: 100%;
}

.header{
	width:100%;
}

.cimonb-picture{
	position: absolute;
	right: 10%;
	float: left;
	margin-top: 5%;
	padding: 0 2%;
	width: 31%;
	z-index: -1;
	bottom: 0;
}

.footer .frame{
	padding: 2% 13%;
}

.img-container img{
	max-width: 100%;
	max-height: 100%;
}

.img-container{
	transition: all 500ms ease;
	height: 200px;
}

.big-picture{
	position: relative;
	width: 100%;
	height: 100%;
}

.horizontal-list{margin-top: 2.5%; padding: 0 2.5%;}

.horizontal-item img{
	width: 100%;
	margin-right: 0;
}

.horizontal-list .icon{
	margin-left: 20%;
}

.cellular{
	margin-left: 1.6%;
}

.instagram{
	max-width: 23px;
	margin-left: 0.5%;
}

.bit-7{
	margin-top: 2%;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #dfd7cd;
    vertical-align: top;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #dfd7cd;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #dfd7cd;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #dfd7cd;
}

.lang{
	padding-left: 0px;
	display: inline;
}

.lang:first-of-type{
	padding-left: 40px;
	display: block;
	float: left;
}

.active{font-weight:400;}
.active:hover{color: #dfd7cd;}

.picto{
	width: 30%;
	padding-top: 5%;
}

.shim{
	display: none;
}

#work{
	background-color: #141414;
	padding-bottom: 1%;
}

.status{
	margin-top: 1%;
}

.menu-icon{
	display: none;
}


#contact a{
	color: #dfd7cd;
	transition: color 1000ms ease;
}

#contact a:hover{
	color: #7b674c;
	transition: color 300ms ease;
}
/*-----------------------------------------------
	
	LARGE SCREENS
	
-----------------------------------------------*/

@media (max-width: 1055px){
	
.about .bit-9{
	width: 100%;		
}

#contact .bit-6{
	width: 20%;
}

.img-container{
	height: 150px;
}

}


/*-----------------------------------------------
	
	MEDIUM SCREENS
	
-----------------------------------------------*/

@media (max-width: 900px){

.frame, .footer .frame{
	padding-right: 4%;
	padding-left: 4%;
}

.header{
	width: 94%;
}

.portfolio .bit-3{
	min-width: 33.3333337%;
}

.about .bit-4{
	clear: both;
}

.cimonb-picture{
	width: 50%;
}

#contact .bit-7, #contact .bit-5{
	width: 100%;
}

#contact .bit-7{margin-top: 6%;}

#contact .bit-5 .info-container{
	width: 50%;
	float: left;
	height: 20%;
}

.copyright{
	width: 45%;
	font-size: 13px;
}

.credit{padding-top:0.4%;}


}

/*-----------------------------------------------
	
	SMALL SCREENS
	
-----------------------------------------------*/

@media (max-width: 620px){

.header{
	width: 100%;
}

.about .bit-4, .cimonb-picture{
	width: 100%;
}

.cimonb-picture{
	right: 0;
	padding: 0;
}

.about .bit-4:last-of-type{
	margin-bottom: 60%;
}

.about p{
	line-height: 30px;
}

.portfolio .bit-3{
	min-width: 50%;
}

#contact .bit-5 .info-container{
	width: 100%;
}


.big-picture{
	position: relative;
	width: 100%;
	height: 100%;
}
	
.menu-icon{
	display: block;
}

.menu-icon{
	width: 20px!important;
}

.menu-text{
	display: none;
}


.link{padding-left: 30px;}

.lang{padding-left: 0;}

.lang:first-of-type{padding-left:30px;}

.picto{
	width: 50%;
}

.credit, .copyright{
	float: none;
	width: 100%;
	padding: 1% 0;
}

.status{
	font-size: 12px;
	padding: 10% 2.5%;
}

}

/*-----------------------------------------------
	
	EXTRA SMALL SCREENS
	
-----------------------------------------------*/

@media (max-width: 400px){

.header{
	width: 100%;
}

.about .bit-4, .cimonb-picture{
	width: 100%;
}

.cimonb-picture{
	right: 0;
	padding: 0;
}

.about .bit-4:last-of-type{
	margin-bottom: 60%;
}

.about p{
	line-height: 30px;
}

.portfolio .bit-3{
	min-width: 50%;
}

#contact .bit-5 .info-container{
	width: 100%;
}



}

.big-picture{
	position: relative;
	width: 100%;
	height: 100%;
}

/*-----------------------------------------------

	CUSTOM CSS
	Dev: Patrick Coleman
	Email: patrickcoleman2280@outlook.com
	Date:07 Avril 2018

-----------------------------------------------*/
span.menu-text{
	text-transform: uppercase;
}
a.lang{
	text-transform: uppercase;

}

/* FORM ERROR STYLES*/
.errorForm{
	color:red;
}