/*body*/

html{

	overflow-x: hidden;
	scroll-behavior: smooth;

}




body{

	margin:0px !important; 
	background: linear-gradient(180deg, #E11415 320px, #ffffff 0, #ffffff 50%, #F3F5F6 100%);



}

#bg-img-tournament {
    height: 312px;
    position: absolute;
    width: 100%;
    z-index: -1;
    top: 0px;
    background-image: url(https://candt-com-production-cms.imgix.net/images/Screen-Shot-2023-03-02-at-10.25.43-AM.png?w=2000&sat=0&invert=false&bri=0&auto=compress%2Cenhance%2Cformat&dpr=1&ixlib=react-8.6.4);
    opacity: 50%;
}


.scroll{

	padding-top: 150px !important;

}
input{
	    font-family: 'Open Sans', sans-serif !important;

}

/* Images */
#registration {
	background-image: url(images/After-reg-sm.png);
}
#paymentplans {
	background-image: url(images/After-pp-sm.png);
}
#ngsettings {
	background-image: url(images/After-settings-sm.png);
}
#cartandcheckout {
	background-image: url(images/Checkout-org-2-sm.png);
}
#assorted {
	background-image: url(images/Assorted-websites-sm.png);
}
#membertheme {
	background-image: url(images/Theme-org-1-sm.png);
}
/* Card */

.card {
    border: 1px solid #B0BEC5;
    border-radius: 4px;
    position: relative;
     scroll-margin-top: 104px;
     overflow: hidden;
 
}
#slidecontainer{
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}
.beforeAfter{

}
.beforeAfter:nth-child(2){
	background: #E11415 !important;
}
.org{
    position: absolute;
	background-color: #ebeef0 !important;
	border: 1px solid #B0BEC5;
	padding: 4px 8px;
	z-index: 99;
	border-radius: 4px;
}
.org p{
	margin-bottom: 0px !important;
}
#org1{
	bottom: 4px;
	left: 4px;

}
#org2{
	bottom: 4px;
	right: 4px;

}
.cards{
	
}

.cards .card:nth-child(3n) {
    margin-right: 0px;
}
.cards .card {
    float: left;
    width: calc(33% - 10px);
    margin-bottom: 16px;
    margin-right: 16px;
    position: relative;
}
.cards .card-body{

}
.cards .card-footer {

}
.card-image {
    width: calc(100% - 0px);
    padding-top: 58%;
    /* background-attachment: fixed; */
    background-size: cover;
    /* background-position: top center; */
    background-repeat: no-repeat;
    border-bottom: 1px solid #B0BEC5;
}
.pills{
	display: inline-block;
	margin-right: 4px;
	margin-top: 8px;
}
.pill {
    border: 1px solid;
    display: inline-block;
    margin-right: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 16px !important;
}
#product{
	background-color: #FCD9D9;
	border-color: #EE3031;
}
#ux{
	background-color: #CCF0FF;
	border-color: #003A52;
}
#reg{
	background-color: #DCFFCC;
	border-color: #1A5000;
}
#payment{
	background-color: #F1DBFF;
	border-color: #7900C4;
}
#settings{
	background-color: #FFF4CC;
	border-color: #997700;
}
#ui{
	background-color: #CCFFCC;
	border-color: #009900;
}
#wordpress{
	background-color: #FFDECC;
	border-color: #993800;
}
#front{
	background-color: #FFCCFA;
	border-color: #FF2DAB;
}

.card-header{
	background: #ebeef0;
	padding: 12px 16px;
}
.card-footer {
    padding: 12px 12px 16px 12px;
    background-color: white;
}
.card-footer p{
	font-size: 16px;
	margin-bottom: 12px;
}
.card-body {
    padding: 16px 24px 24px 24px;
    background: white!important;
}
.card-body p{
	margin-bottom: 8px;
}

.card-footer .button {
    padding: 8px 16px;
    border-radius: 4px;
    color: white !important;
    background-color: #003A52;
    display: inline-block;
    height: unset;
    width: auto;
    border-bottom: none;
}
.card-footer .button:hover{
	background-color: #E11415;
}
.exp-company-header .company{
	display: inline-block;
	vertical-align: middle;
}
.exp-company-header img{
	width: 52px !important;
	height: 52px !important;
	margin-right: 8px;
}
.exp-company-header p{
	margin-bottom: 0px !important;
}
.exp-company-header{
margin-bottom: 24px !important;
}
.exp-company {
    margin-left: 24px;
    padding-left: 32px;
    border-left: 1px solid #B0BEC5;
}
.job{
	margin-bottom: 16px;
}
/*Typography*/



.subtitle {

    margin-bottom: 30px;

    margin-top: 0px;

    font-weight: 300;

    font-size: 24px !important;

}

.subtitlebottom{
	position: absolute;
    margin-left: 15%;
    bottom: 30px;
    font-weight: 300;
    font-size: 24px;
}
.subtitle2 {

    margin-bottom: 30px;

    margin-top: 10px;

    font-weight: 300;

    font-size: 20px;

}

#colors p{

	margin-top: 10px;

	margin-bottom: 10px;

	line-height: 30px;

}
ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}
a{

	margin: 0px;

	height: 0px;

	text-decoration: none;

}

#links a{

	margin-right: 10px;

	margin-left: 10px;

	height: 0px;

	text-decoration: none;

	font-size: 18px;

}
.card a{
		border-bottom: 1px solid #E11415;

}
#links a:hover{
	border-bottom: 2px solid #E11415;
}
#links a:active{
	border-bottom: 2px solid #E11415;
}
#links a.active{
	border-bottom: 2px solid #E11415;
	font-weight: bold;
}
h1, h2, h3, h4, h5, p, a, li, label, textarea {

	font-family: 'Open Sans', sans-serif;

	color: #393939;

	margin: 0px;

}

::placeholder{

font-family: 'Open Sans', sans-serif;

	color: #666;

	margin: 0px;

}

input[type=text] {

font-family: 'Open Sans', sans-serif;

	color: #666;

	margin: 0px;

}

i{

	color: #E11415;

	font-size: 18px;

}


p, a{

	font-size: 18px;
	font-weight: 500;

}
li{
	  margin-left: 16px;
	  font-size: 18px;
	font-weight: 500;
	margin-bottom: 8px !important;

}
ul{
	padding-left: 16px !important;
	margin-top: 8px !important;
}
.nested{
		  margin-left: 32px !important;
		  list-style-type: circle;
}
#portfolio li{
 margin-left: 0px;
	  font-size: 18px;
	font-weight: 500;
	margin-bottom: 0px !important;
}
h1{

	font-size: 32px;

}
.card-header h1{
	font-size: 32px;
}


h2{

	font-size: 24px;

}
h3 {
    font-size: 18px;
    padding: 4px 0px;
}

h4{

	font-size: 20px;

}

#introtitle p {

    color: white;

    font-size: 24px;

}

#title{

	font-weight: bold;

	margin: 0px;

	margin-right: 15px;

	margin-top: 30%;

	color: white;

	font-size: 1.8vw;

}

#category{

	font-weight: light;

	font-size: 1.4vw;

    margin: 0px;

	margin-right: 15px;

	color: white;

}



.fa-search{

	display: none !important;

}





/*Logo*/



#logo{
 width: 72px;
    margin-left: 24px;
    margin-top: 4px;
    display: inline-block;
    float: left;

}

#logo img{

width: inherit;

margin-bottom: 0px;

}

#logo a {
    width: 100%;
    height: auto;
    display: block;
}

#logoscroll {
    width: 110px;
    margin-left: 40px;
    margin-top: 5px;
    display: inline-block;
    float: left;
}

#logoscroll img{

width: inherit;

margin-bottom: 10px;

}

#logoscroll a{

width: 100%;

}



/*nav*/
#social {
    position: fixed;
    top: 15px;
    right: 0px;
    z-index: 999999999;
    background: #E11415;
    padding: 5px 10px;
}
#social a{
	margin-right: 10px;
}
#social i{
	font-size: 24px!important;
	color: white !important;
}
header nav{
    position: absolute;
    width: calc(100% - 120px);
    text-align: right;
    right: 24px;
    top: 28px;
}

header{


	position: fixed;

    z-index: 99999;

    background-color: white;

    height: 80px;
 
    width: 100%;

    padding-bottom: 0px;

    top: 0px;

    border-bottom: 1px solid #B0BEC5;


}

.navscroll {
    position: absolute;
    width: 500px;
    text-align: right;
    right: 0px;
    top: 70px;

}

.headerscroll{

	position: fixed;

    z-index: 99999;

    background-color: white;

    height: 130px;
 
    width: 100%;

    padding-bottom: 0px;

    top: 0px;

}

#searchbar{

	display: none;

	width: 100%;

	margin: auto;

}

#searchbar input{

	width:90%;

	margin-right: 5px;

}

.search{

	display: inline-block !important;

}

.linkhide{

	display: none !important;

}

#portfoliopics{

    list-style-type: none;

    margin: 0px !important;

    padding: 0px !important;

}



.hide{

	display: none !important;

}



/*Portfolio*/



#portfoliopics li{

	width: 33.33%;

    float: left;

    position: relative;

   }

#portfolio{

    background-color: black;

    display: inline-block;

    float: left;
}

#portfoliopics li img{

    background-color: white;

}

.project{

	width: 100%;

	display: block;

}



.grayscale{

	filter: grayscale(100%);

	opacity: .8;

}

.projecttitle{

	display: none;

	width: 100%;

	height: 50%;

	position: absolute;

	bottom: 0px;

	background-size: cover;

	background-image: url("images/Incampo-Portfolio-Rollover-graphic.png");

	z-index: 999;

	text-align: right;



}

.projecttitleshow{

	display: block!important;

}



/*Call to Action*/

 {

    background-color: #FF0;

}



#CTA{

	width: 100%;

	background-color: #0CBEEC;

	text-align: center;

	padding: 50px 0px;

	float: left;

}

#buttontitle{

	font-weight: bold;

	color: white;

	font-size: 30px;

	margin-bottom: 35px;

}
.buttongroup{
	display: inline-block;
}
.buttongroup .button{
	margin-right: 4px;
}
.image-group{
		display: inline-block;
		margin: 8px;
}
#pageheader,#pageheaderscroll {
    margin-bottom: 24px;
}
#pageheader h1{
	color: white !important;
	    line-height: 120%;
	    	font-size: 32px;
}
#pageheaderscroll h1{
	color: #393939 !important;
	    line-height: 120%;
	    font-size: 32px;
}
#pageheader .image-group img {
    margin-right: 16px;
    width: calc(33% - 8px) !important;
    border: 1px solid #B0BEC5;
    border-radius: 4px;
    display: none;
}
#pageheader .image-group img:last-child {
    margin-right: 0px;
}
#pageheader.card{
	border-color: #E11415 !important;
}
.image-group img {
    margin-right: 16px;
    width: calc(33% - 10px) !important;
    border: 1px solid #B0BEC5;
    border-radius: 4px;
}
.image-group img:nth-child(3n) {
    margin-right: 0px;
}
.image-group img:nth-child(n+4) {
    margin-top: 16px;
}
.image-group-new img {
    margin-right: 16px;
    width: calc(50% - 10px) !important;
}
.image-group-new img:first-child {
    margin-right: 0px;
    width: calc(100% - 0px) !important;
    margin-bottom: 16px;
}
.image-group-new img:last-child {
    margin-right: 0px;
}
.image-group img:hover{
	cursor: zoom-in;

}
.image-group-new img:hover{
	cursor: zoom-in;

}
#button{

	font-size: 18px;

	padding: 7px 15px;

    border: solid 3px white;

    color: white;

    background-color: #003A52;

    -webkit-appearance: none;


}
input[type="submit" i]input {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
input {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}

#button:hover {

    background-color: #EE3031;

    -webkit-transition: background-color 200ms linear;

    -ms-transition: background-color 200ms linear;

    transition: background-color 200ms linear;

}

/*Footer*/

footer {
    padding: 12px 24px;

    position: relative;
    height: 24px;
    background: white;
        border-top: 1px solid #B0BEC5;

}

footer p {
    display: inline-block;
    margin-right: 12px;
}

#footer {
    position: relative;
    width: 100%;
    text-align: right;
    display: inline-block;
    box-sizing: border-box;
}





/*Contact*/

.contactform{

	width: 80%;

	margin-left: 10%;

	height: 800px;

	margin-top: 50px;

	position: relative;

	clear: both;

}

#contactred {

    padding: 0px 10%;

    overflow: hidden;

    background-size: cover;

    background-image: url(images/contact-red-bg.png);

    background-repeat: no-repeat;

}

#contact {

	width: 100%;

}

.formsections input{

	vertical-align: top;

	position: relative;

	right: 0px;

	width: 100%;

	padding: 10px;

	-webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    border-radius: 5px;

    border-style: solid;

    border: 1px solid gray;

}

.formsections textarea{

	vertical-align: top;

	position: relative;

	right: 0px;

	width: 100%;

	padding: 10px;

	height: 300px;

	margin: 0px;

	-webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    border-radius: 5px;

    border: 1px solid gray;

}

.formsections  label{

	display: inline-block;

	width: 100%;

	margin-right:5%;

	margin-bottom: 10px;

	text-align: left;

	vertical-align: top;

}

.formsectionshalf {

	position: relative;

	margin-bottom: 16px;

	width: 49.25%;

	height: auto;

	float: left;

}

.formsectionshalf:first-child {

	margin-right: 1.5%;

}

.formsectionshalf input{

	vertical-align: top;

	position: relative;

	right: 0px;

	width: 100%;

	padding: 10px;

	-webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    border-radius: 5px;

    border: 1px solid gray;

}

.formsections textarea{

	vertical-align: top;

	position: relative;

	right: 0px;

	width: 100%;

	padding: 10px;

	height: 200px;

	margin: 0px;

	-webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    border-radius: 5px;

    border: 1px solid gray;

}

.formsectionshalf  label{

	display: inline-block;

	width: 100%;

	margin-right:5%;

	margin-bottom: 10px;

	text-align: left;

	vertical-align: top;

}

.formsections {

	position: static;

	margin-bottom: 16px;

	height: auto;

}

#contact input{

margin-left: 10%;

position: absolute;

	right: 0px;

}

#textarea{

	height: 250px;

	margin-bottom: 20px !important;

}

#intouch{

	text-align: center;

	margin-bottom: 50px; 

}

input[type="button" i], input[type="submit" i], input[type="reset" i] {

    border: 2px solid red;

    border-radius: 5px;

    padding: 13px 0px;

    color: red;

    width: 10%;

    margin-left: 90%;

    text-align: center;

    background-color: white;

}

#thanks{

    text-align: center;

    margin-top: 100px;

    min-height: 34vh;

    margin-bottom: 150px;

}



#thanks h2{

	color: #E11415;

}
/* Services */
#introred{
	height: 10px;
	background-color: #E11415;
}
#serviceslist li {
    margin: 0px;
    line-height: 3.9vw;
    padding: 0px;
    color: white;
    font-size: 1.4vw;
    font-weight: bold;
    margin-bottom: 14px;
    background: #E11415;
    text-align: center;
}
#servicepara1 p, #servicepara3 p{
	font-size: 1.3vw;
}

#serviceslist {
    margin: 20px 0px 6px 0px;
}
#serviceslist ul{
	margin: 0px;
	padding: 0px;
	columns: 3;
}
#servicepara3{
	margin-bottom: 40px;
}
#servicetitle h1{
	width: 60%;
    border-left: 20px solid #E11415;
    padding-left: 20px;
    margin: 50px 0px;
    line-height: 45px;
}
/*About*/

.title{


}

.date{
	font-weight: 600;

}
#profilepic {
    width: 25%;
    padding-top: 25%;
    border-radius: 4px;
    background-image: url(images/profile-2023.jpeg);
    background-position: center;
    background-size: cover;
    display: inline-block;
    vertical-align: top;

}

#profileinfo{

	width: 70%;

	margin-left: 20px;

	vertical-align: middle;

	display: inline-block;

}

#profile{

	width: 100%;

	margin-bottom: 16px;


}

#leftcolumn{

width: 63%;

float: left;

overflow: hidden;

}

#leftcolumn .card, #rightcolumn .card{
	margin-bottom: 16px;
}

#rightcolumn{

width: 35%;

margin-bottom: 50px;

margin-left: 2%;

float: left;

overflow: hidden;

}

.slidein{

	left: 0px !important;

	    -webkit-transition: all .4s ease-in-out;

    -moz-transition: all .4s ease-in-out;

    -ms-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out;

}

.slideright{

	right: 0px !important;

	    -webkit-transition: all .4s ease-in-out;

    -moz-transition: all .4s ease-in-out;

    -ms-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out;

}



/*Education*/

#education{

	position: relative;

	right: -1000px;

	    -webkit-transition: all .4s ease-in-out;

    -moz-transition: all .4s ease-in-out;

    -ms-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out;

}

#educationheader{

height: 48px;

background-color: #003652;

position: relative;

}

#educationcontent{

margin-left: 35%;

margin-top: 20px;

margin-bottom: 20px;

}

#educationheader h2{

top: 10%;

left: 35%;

color: white;

position: absolute;

}



/*Skills*/

#skill{

	position: relative;

	right: -1000px;

	    -webkit-transition: all .4s ease-in-out;

    -moz-transition: all .4s ease-in-out;

    -ms-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out;

}

#skillheader{

height: 48px;

background-color: #003652;

position: relative;

}

#skillcontent{

margin-left: 35%;

margin-top: 20px;

margin-bottom: 20px;

}

#skillcontent h4{

font-style: italic;

color: #E11415;

}

#skillheader h2{

top: 10%;

left: 35%;

color: white;

position: absolute;

}

#certificate{

	position: relative;

	right: -1000px;

	    -webkit-transition: all .4s ease-in-out;

    -moz-transition: all .4s ease-in-out;

    -ms-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out;

}
.issuer{
	margin-bottom: 0px !important;
}
/*Programs*/

#programs{

	position: relative;

	right: -1000px;

	    -webkit-transition: all .4s ease-in-out;

    -moz-transition: all .4s ease-in-out;

    -ms-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out;

}

#programheader{

height: 48px;

background-color: #003652;

position: relative;

}

#programcontent{

margin-left: 35%;

margin-top: 20px;

margin-bottom: 20px;

}

#programcontent h4{

font-style: italic;

color: #E11415;

}

#programheader h2{

top: 10%;

left: 35%;

color: white;

position: absolute;

}



/*Experience*/

#experience{

	position: relative;

	left: -1500px;

	    -webkit-transition: all .4s ease-in-out;

    -moz-transition: all .4s ease-in-out;

    -ms-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out;

}

#eduexperience{

	position: relative;

	left: -1500px;

	    -webkit-transition: all .4s ease-in-out;

    -moz-transition: all .4s ease-in-out;

    -ms-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out;

}

#experienceheader{

height: 70px;

background-color: #E11415;

position: relative;

}

#experienceheader h2{

top: 10%;

left: 5%;

color: white;

position: absolute;

}

#experiencecontent{

margin-left: 5%;

margin-top: 20px;

width: 80%;

margin-bottom: 20px;

}



/* Intelligent Outcasts */

#intropic img{

	width: 100%;

}

#intropic{

	position: relative;

}

#introtitle{

	position: absolute;

	bottom: 50px;

	background-color: #EE3031;

	padding: 10px 20px;

	padding-left: 15%;

}

#introtitle h1{

	color: white;

}

#introtitle p{

	color: white;

}

.body {
    max-width: 1400px;
    margin: auto;
    margin-top: 104px !important;
    padding: 0px 24px;
    min-height: 83vh;
    padding-bottom: 40px;
}

#introtext{

	margin-top: 20px;

}

#sectiontitle{

	background-color: #0CBEEC; 

	text-align: center;

	padding: 10px;

	margin-top: 20px;

	margin-bottom: 20px;

}

#sectiontitlered {

    background-color: #0CBEEC;

    text-align: center;

    padding: 10px 0px;

    margin-top: 20px;

    margin-bottom: 20px;

    width: 100%;

    border-left: 5px solid #EE3031;

    border-right: 5px solid #EE3031;

}

#sectiontitle h2{

	color: white;

}

#sectiontitlered h2{

	color: white;

}

#projectleftcolumn{

	width: 48%;

	margin-right: 2%;

	float: left;

}

#projectrightcolumn{

	width: 48%;

	margin-left: 2%;

		float: left;

	}

#Logo{

	overflow: hidden;

	margin-bottom: 40px;

}

#typography{

	overflow: hidden;

	margin-bottom: 40px;

}



#projectleftcolumn img {
    width: 100%;
    margin-bottom: 20px;
}

#projectrightcolumn img{
		width: 100%;
    margin-bottom: 20px;

}

#projectfullwidth img{

	width: 100%;

}

#colors{

	overflow: hidden;

	margin-bottom: 40px;

}

.colors{

	width: 100%;

	height: 200px;

}

#intelligentblack{

	background-color: #222222;

}

#intelligentred{

	background-color: #B12028;

}

#sitedesign {
    padding: 0px 15%;
    position: relative;
    background-size: cover;
    z-index: 9999;
    margin-top: -20%;
}
#sitedesignco {
    padding: 0px 15%;
    position: relative;
    background-size: cover;
    z-index: 9999;
}
#redbg{
		position: relative;

    background-color: #ee3031;

}
.cored{
	margin-bottom: : 30px;
}
#redbgshape1 {
    width: 100%;
    z-index: 1;
    margin-top: -13px;
}
#redbgshape3 {
    width: 100%;
    z-index: 1;
    position: absolute;
}
#redbgshape2 {
    width: 100%;
    margin-bottom: -13px;
    margin-top: -270px;
}
#projectfullwidthred img{

	width: 100%;

	border: 5px solid #EE3031;

}

#projectfullwidthred{



}

#tablet{

	overflow: hidden;

}

#tablet img{

	margin-bottom: 50px;

}

#mobile{

	overflow: hidden;

}

#mobile img{

	margin-bottom: 50px;

}
/* Co Site */
.comobile {
	    width: 70% !important;
    margin: 0 15%;
}

/*Edwards Havens*/
#ehblue{
	background-color: #1da1f2;
}

#ehblack{
	background-color: #000000;
}

#ehlogocolor{
	border: 1px solid black;
}
/* Dot Surf */



.secondarycolors{

	width: 100%;

	height: 100px;

}

#surfblue{

	background-color: #4597CB;

}

#surfgreen{

	background-color: #83C8BC;

}

#surfdarkgreen{

	background-color: #004C45;

}

#surfdarkblue{

	background-color: #085156;

}

#surflightgrey{

	background-color: #D1D3D3;

}

#projectthirdred img{

	width: 100%;

	border: 5px solid #EE3031;

}

#projectthirdredleft img{

	width: 100%;

	border: 5px solid #EE3031;

}

#projectthirdredright img{

	width: 100%;

	border: 5px solid #EE3031;

}

#projectthirdred{

	width: 31.4%;

	float: left;

	margin-right: 1%;

	margin-left: 1%;

}

#projectthirdredleft{

	margin-right: 2%;

	margin-left: 0%;

	width: 31.3%;

	float: left;

}

#projectthirdredright{

	margin-left: 2%;

	margin-right: 0%;

	width: 31.3%;

	float: left;

}

#sitedesignsurf {

    padding: 0px 15%;

    overflow: hidden;

    background-size: cover;

    background-image: url(images/projects/Dot-Surf/Dot-Surf-red-bg.png);

    background-repeat: no-repeat;

}

.last{

	margin-bottom: 50px;

}





/* Idea Printers */

#ideablue{

	background-color: #243746;

}

#ideagreen{

	background-color: #2ed9c3;

}

#ideared{

	background-color: #e64b38;

}

.colorrow{

	overflow: hidden;

}

#redbgidea {

    padding: 0px 15%;

    overflow: hidden;

    background-size: contain;

    background-image: url(images/projects/Idea-Printers/Idea-Printer-red-bg.png);

    background-repeat: no-repeat;

}

#redbgidea img{

	width: 100%;

	overflow: hidden;

	border: 5px solid #EE3031;

}

.body img{

	width: 100%;

	overflow: hidden;

}
#tablet img {
    width: 100%;
    overflow: hidden;
}
#mobile img {
    width: 100%;
    overflow: hidden;
}

.section{

	overflow: hidden;

}

#projectoverview{
	margin-top: 16px;
}
.projectquarterrow{


	width: 23%;

	float: left;

	margin: 1%;

}

.projectquarterrow img {
    width: 100% !important;
    border: 1px solid;
}

.projectquarterrow:nth-child(1){

	margin-left: 0% !important;

}

.projectquarterrow:nth-child(4){

	margin-right: 0% !important;

}

.approw{

	width: 100%;

	overflow: hidden;

}



/* Bourdain */



#projectthird img{

	width: 100%;

}

#projectthirdleft img{

	width: 100%;

}

#projectthirdright img{

	width: 100%;

}

#projectthird{

	width: 31.35%;

	float: left;

	margin-right: 1%;

	margin-left: 1%;

}
#projectthirdleft{

	margin-right: 2%;

	margin-left: 0%;

	width: 31.25%;

	float: left;

}

#projectthirdright{

	margin-left: 2%;

	margin-right: 0%;

	width: 31.25%;

	float: left;

}

#bourdainblack{

	background-color: #222222;

}

#bourdainyellow{

	background-color: #Ffe800;

}

#redbgbourdain {

    padding: 0px 15%;

    overflow: hidden;

    background-size: cover;

    background-image: url(images/projects/Bourdain/bourdain-red-bg.png);

    background-repeat: no-repeat;

}

.bourdainrecipe{

	border: 1px solid black;
	position: relative;;

}

/* Main Street */

#mainblack{

	background-color: #222222;

}

#mainred{

	background-color: #96262C;

}

#mainyellow1{

	background-color: #FCE200;

}

#mainyellow2{

	background-color: #FFD100;

}

#mainblue{

	background-color: #96DAEA;

}

#mainpink{

	background-color: #E36386;

}

.secondarycolors{

	overflow: hidden;

}

#sitedesignmain {

    padding: 0px 15%;

    overflow: hidden;

    background-size: cover;

    background-image: url(images/projects/Main-Street/red-bg-main.png);

    background-repeat: no-repeat;

}

/*Allegravita*/

#projectthirdav img{

	width: 100%;

}

#projectthirdleftav img{

	width: 100%;

}

#projectthirdrightav img{

	width: 100%;

}

#projectthirdav{

	width: 23%;

	float: left;

	margin-right: 1%;

	margin-left: 1%;

}

#projectthirdleftav{

	margin-right: 2%;

	margin-left: 0%;

	width: 23%;

	float: left;

}

#projectthirdrightav{

	margin-left: 2%;

	margin-right: 0%;

	width: 48%;

	float: left;

}

#avgreen{

	background-color: #789904;

}

#avblue{

	background-color: #0083AD;

}

#avdarkgray{

	background-color: #54565A;

}

#avlightgray{

	background-color: #BBBBBB;

}

#redbgav {

    padding: 0px 15%;

    overflow: hidden;

    background-size: cover;

    background-image: url(images/projects/allegravita/red-bg-av.png);

    background-repeat: no-repeat;

}

.booklet{

	border: 1px solid black;

	margin-bottom: 20px;

}



/* Jabba*/



#redbgjabba {

    padding: 0px 10%;

    overflow: hidden;

    background-size: cover;

    background-image: url(images/projects/jabba/red-bg-jabba.png);

    background-repeat: no-repeat;

}

/* Kempson Design */

#kempsonblue{
	 background-color: #00b2e3;

}
#kempsonorange{
	 background-color: #ff5f00;
}

/*  Dot Shop */
#shoptablet{
	border: 1px solid black;
}
#shopmobile{
	border: 1px solid black;
}
#tablet #projectleftcolumn{

	width: 47.75%;

	margin-right: 2%;

	float: left;

}

#tablet #projectrightcolumn{

	width: 47.75%;

	margin-left: 2%;

		float: left;

	}

/* Jerk Alert */
#jerkpink{
	 background-color: #f3426d;

}
#jerkblue{
	 background-color: #36b4e5;
}
#jerkred{
	 background-color: #f12535;
}
#jerkgray{
	 background-color: #c7c7c7;
}

#jerklogocolor{
	border: 1px solid black;
}
#jerkcolor {
    margin-top: 0%;
    position: relative;
}
/* 33LOR */

#lordblue{
  background-color: #18355e;
}
#lororange{
  background-color: #e86851;
}
#loryellow{
  background-color: #f7be00;
}
#lormblue{
  background-color: #3a7bc8;
}
#lorlblue{
  background-color: #88b7e8;
}
#lorblack{
  background-color: #111821;
}

/*Romeos*/
#romeosred{
  background-color: #b12028;
}
#romeosgreen{
  background-color: #006937;
}
#romeosbrown{
  background-color: #774d28;
}
#romeosyellow{
  background-color: #f0e78f;
}
.web{
    border: 1px solid black;
    margin-bottom: 20px;
}
/* Illustrations */

.section2 #projectleftcolumn{

	margin-top: 120px;

}

#redbgillu #projectleftcolumn img{

	width: 100%;

	border: 5px solid #EE3031;

}

#redbgillu #projectrightcolumn img{

	width: 100%;

	border: 5px solid #EE3031;

}

#redbgillu {

    padding: 0px 10%;

    overflow: hidden;

    background-size: cover;

    background-image: url(images/projects/illustrations/red-bg-illu.png);

    background-repeat: no-repeat;

}

.section2{

	overflow: hidden;

}

#illustration5{

	margin-top: 120px;

}

#illustration7{

	width: 85% !important;

    margin-bottom: 20px;

    margin-top: 20px;

}

#illustration8{

	width: 85% !important;

	margin-left: 15%;

    margin-bottom: 20px;

    margin-top: 20px;

}

#illustration10{

	margin-top: 100px;

}

#illustration12{

	width: 75% !important;

	margin-left: 25%;



}

#illustration13{

	width: 65% !important;

}

/*New home*/

#whoiam {
	margin-bottom: 24px;
}
#whoiam h1{
	color: white !important;
}

/* Tournament reg */


#pageheader {
	margin-bottom: 24px;
}
#pageheader h1{
	color: white !important;
}
#pageheader p{
	color: white !important;
}
#pageheader .card{
	border-color: #E11415 !important;
}
#pageheader .card-header{
	background: #E11415;
	padding: 12px 12px;
}
#rightcolumnproduct{

width: 75%;

float: left;

overflow: hidden;

}

#leftcolumnproduct .card, #rightcolumnproduct .card{
	margin-bottom: 16px;
}

#leftcolumnproduct {
    width: calc(25% - 16px);
    margin-bottom: 50px;
    margin-right: 16px;
    float: left;
    position: sticky;
    top: 104px;
}

/*  mobile */
@media only screen and (max-width: 1000px) {

body {
    margin: 0px !important;
    background: linear-gradient(180deg, #E11415 480px, #ffffff 0, #ffffff 50%, #F3F5F6 100%);
}
#pageheader .image-group img {
    margin-right: 0px;
    width: calc(100% - 2px) !important;
    border: 1px solid #B0BEC5;
    border-radius: 4px;
}
.image-group img {
    margin-right: 4px;
    width: calc(33% - 4px) !important;
    border: 1px solid #B0BEC5;
    border-radius: 4px;
}

.image-group {
    display: inline-block;
    margin: 4px;
}
#pageheader {
    margin-bottom: 12px;
}
body{
	overflow-y: hidden !important;
}



.body {
    max-width: 1400px;
    margin: auto;
    margin-top: 98px !important;
    padding: 0px 16px;
    padding-bottom: 40px;
    min-height: 90vh !important;
}
#intropic img {
    width: 180%;
    margin-left: -40%;
}
#projectleftcolumn img {
    width: 100%;
    margin-bottom: 10px;
}
#projectrightcolumn img {
    width: 100%;
    margin-bottom: 10px;
}

body{
	overflow-x: hidden;
}

.exp-company {
    margin-left: 0px;
    padding-left: 0px;
    border-left: none;
}

#colors #projectleftcolumn{
	width: 100% !important;
	margin: 0px !important;
}
#colors #projectrightcolumn{
	width: 100% !important;
	margin: 0px !important;
}
#colors #projectleftcolumn #projectleftcolumn{
	width: 48% !important;
	margin: 1% !important;
}
#colors #projectleftcolumn #projectrightcolumn{
	width: 48% !important;
	margin: 1% !important;
}
#colors #projectrightcolumn #projectleftcolumn{
	width: 48% !important;
	margin: 1% !important;
}
#colors #projectrightcolumn #projectrightcolumn{
	width: 48% !important;
	margin: 1% !important;
}
#Logo #projectleftcolumn{
	width: 100% !important;
	margin: 0px !important;
}
#Logo #projectrightcolumn{
	width: 100% !important;
	margin: 0px !important;
}

/*Typography*/



.subtitle {

    margin-bottom: 30px;

    margin-top: 0px;

    font-weight: 300;

    font-size: 14px !important;

}


.subtitlebottom{
	position: absolute;
    margin-left: 15%;
    bottom: 30px;
    font-weight: 300;
    font-size: 24px;
}
.subtitle2 {

    margin-bottom: 30px;

    margin-top: 10px;

    font-weight: 300;

    font-size: 14px !important;

}

#colors p{

	margin-top: 10px;

	margin-bottom: 10px;

	line-height: 30px;

}

a{

	margin: 0px;

	height: 0px;

	text-decoration: none;

}

#links a{

	margin-right: 10px;

	margin-left: 10px;

	height: 0px;

	text-decoration: none;

	font-size: 16px;

}
#links a:hover{
	border-bottom: 2px solid #E11415;
}
.navscroll .mobdash{
	display: none;
}

h1, h2, h3, h4, h5, p, a, label, textarea {

	font-family: 'Open Sans', sans-serif;


	margin: 0px;

}

::placeholder{

font-family: 'Open Sans', sans-serif;


	margin: 0px;

}

input[type=text] {

font-family: 'Open Sans', sans-serif;


	margin: 0px;

}

i{

	color: #E11415;

	font-size: 18px;

}

p{

	font-size: 16px;

}
ul{
	padding-left: 16px;
}
li{

	font-size: 16px;

}
h1{

	font-size: 24px;
	line-height: 32px;

}
.card-header h1{
	font-size: 24px;
}

h2{

	font-size: 20px;

}

h3{

	font-size: 18px;

}

h4{

	font-size: 16px;

}
.cards {
    display: block;
}
.cards .card:nth-child(3) {
    margin-right: 0%;
}
.cards .card {
    float: left;
    width: 100%;
    margin-bottom: 16px;
}

#introtitle p {

    color: white;

    font-size: 24px;

}
.projecttitle {
    /* display: none; */
    width: 100%;
    height: 63%;
    position: absolute;
    bottom: 0px;
    background-size: cover;
    background-image: url(images/Incampo-Portfolio-Rollover-graphic.png);
    z-index: 999;
    text-align: right;
}

#title {
    font-weight: bold;
    margin: 0px;
    margin-right: 15px;
    margin-top: 23%;
    width: 50%;
    margin-left: 42%;
    color: white;
    font-size: 15px;
}

#category {
    font-size: 13px;
    margin: 0px;
    margin-right: 15px;
    color: white;
}



 #portfoliopics li{

	width: 50%;

    float: left;

    position: relative;

   }

#title{

	font-weight: bold;

	margin: 0px;

	margin-right: 15px;

	margin-top: 30%;

	color: white;

	font-size: 30px;

}

#category{

	font-weight: light;

	font-size: 24px;

    margin: 0px;

	margin-right: 15px;

	color: white;

}
	header{
		height: 80px;
	}
	#logo {
    width: 72px;
    margin-left: 8px;
    margin-top: 4px;
    display: inline-block;
    float: left;
}
.headerscroll {
    position: fixed;
    z-index: 99999;
    background-color: white;
    height: 100px;
    width: 100%;
    padding-bottom: 0px;
    top: 0px;
}
#logoscroll {
    width: 90px;
    margin-left: 30px;
    margin-top: 5px;
    display: inline-block;
    float: left;
}
#social {
    position: fixed;
    bottom: 32px;
    right: 0px;
    top: unset;
    z-index: 999999999;
    background: #E11415;
    padding: 5px 10px;
}
   /* Nav */

header nav {
     position: absolute;
    width: 75%;
    text-align: right;
    right: 12px;
    top: 27px;
}
.navscroll {
    position: absolute;
    width: 55%;
    text-align: right;
    right: 20px;
    top: 27px;
}
	/* Contact */

	label{

		font-size: 16px !important;

	}

.formsectionshalf {
    position: relative;
    margin-bottom: 16px;
    width: 100%;
    height: auto;
    float: left;
}
	#contactred {

    padding: 0px 0%;

    overflow: hidden;

    background-size: cover;

    min-height: 84vh;

    background-image: url(images/contact-red-bg.png);

    background-repeat: no-repeat;

	}

	input[type="button" i], input[type="submit" i], input[type="reset" i] {

    border: 2px solid red;

    border-radius: 5px;

    padding: 13px 0px;

    color: red;

    width: 100%;

    margin-left: 0%;

    text-align: center;

    background-color: white;

	}

#introtitle p {
    color: white;
    font-size: 16px;
}
/* idea */
.projectquarterrow {
    width: 47%;
    float: none;
    display: inline-block;
    margin: 1%;
}
.projectquarterrow:nth-child(1) {
    margin-left: 1% !important;
}
.projectquarterrow:nth-child(4) {
    margin-left: 1% !important;
}

/* Services */
#servicepara1 p, #servicepara3 p{
	font-size: 18px;
}

#serviceslist {
    margin: 20px 0px;
}
#serviceslist ul{
	margin: 0px;
	padding: 0px;
	columns: 1;
}
#serviceslist li {
    margin: 0px;
    line-height: 50px;
    padding: 0px;
    color: white;
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 14px;
    background: #E11415;
    text-align: center;
}
#servicetitle h1 {
    width: 80%;
    border-left: 10px solid #E11415;
    padding-left: 20px;
    margin: 50px 0px;
    line-height: 36px;
}
.serviceh2 h2 {
    font-size: 27px;
    line-height: 29px;
    text-align: left;
    width: 70%;
}

	/*about*/

	#profilepic {
    width: 100%;
    margin-bottom: 20px !important;
    margin: auto;
    border-radius: 4px;
    background-image: url(images/profile-2023.jpeg);
    background-size: contain;
    display: block;
    vertical-align: middle;
    padding-top: 100% !important;

}

	#profileinfo {

    width: 100%;

    margin-left: 0px;

    vertical-align: middle;

    display: block;
  }


	
/*about*/
#leftcolumn{
	width: 100% !important;
}
#rightcolumn{
	width: 100% !important;
	margin-left: 0px !important;
}


	/* Footer */
#buttontitle {
    font-weight: bold;
    color: white;
    font-size: 23px;
    margin-bottom: 35px;
    width: 70%;
    margin-left: 15%;
}
footer {
    padding: 10px 3%;
    float: left;
    width: 94%;
    position: relative;
    border-top: 1px solid #B0BEC5;
}
	footer p {
    font-size: 18px;
    text-align: center;
    left: 0px;
}
	
	footer #links a {
    margin-right: 10px;
    margin-left: 10px;
    height: 0px;
    text-decoration: none;
    font-size: 12px;
    display: none;
}
#footer {
    position: absolute;
    text-align: center;
    right: 0px;
    top: 10px;
}
#rightcolumnproduct{

width: 100%;

float: left;

overflow: hidden;

}

#leftcolumnproduct .card, #rightcolumnproduct .card{
	margin-bottom: 16px;
}

#leftcolumnproduct{

width: 100%;

margin-bottom: 0px;

margin-right: 0%;

float: left;

position: sticky;

    top: 104px;

}
.card-header{
	background: #ebeef0;
	padding: 12px 12px;
}
.card-body {
    padding: 12px 16px 16px 16px;
    background: white!important;
}
.card-footer .button {
    padding: 8px 16px;
    border-radius: 4px;
    color: white !important;
    background-color: #003A52;
    height: unset;
        width: calc(100% - 32px);
    margin-bottom: 8px;
    border-bottom: none;
    text-align: center;
}
.card{
	scroll-margin-top: 160px;
}
#slidecontainer{
	display: none;

}

/* Images */


}

@media only screen and (max-width: 1440px) {

.buttongroup .button:nth-child(3){
	margin-bottom: 8px;
}


}