html, body{
  height:100%;
}


@font-face {
    font-family: 'robotolight';
    src: url('../fonts/roboto-fontfacekit/roboto_light_macroman/Roboto-Light-webfont.eot');
    src: url('../fonts/roboto-fontfacekit/roboto_light_macroman/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-fontfacekit/roboto_light_macroman/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/roboto-fontfacekit/roboto_light_macroman/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/roboto-fontfacekit/roboto_light_macroman/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotothin';
    src: url('../fonts/roboto-fontfacekit/roboto_thin_macroman/Roboto-Thin-webfont.eot');
    src: url('../fonts/roboto-fontfacekit/roboto_thin_macroman/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-fontfacekit/roboto_thin_macroman/Roboto-Thin-webfont.woff') format('woff'),
         url('../fonts/roboto-fontfacekit/roboto_thin_macroman/Roboto-Thin-webfont.ttf') format('truetype'),
         url('../fonts/roboto-fontfacekit/roboto_thin_macroman/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotomedium';
    src: url('../fonts/roboto-fontfacekit/roboto_medium_macroman/Roboto-Medium-webfont.eot');
    src: url('../fonts/roboto-fontfacekit/roboto_medium_macroman/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-fontfacekit/roboto_medium_macroman/Roboto-Medium-webfont.woff') format('woff'),
         url('../fonts/roboto-fontfacekit/roboto_medium_macroman/Roboto-Medium-webfont.ttf') format('truetype'),
         url('../fonts/roboto-fontfacekit/roboto_medium_macroman/Roboto-Medium-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic);


h1.pageheadings{
  font-size:50px; 
  font-weight:bold; 
  font-family:Helvetica; 
  line-height:100%;
}

.bigCheck{
  width: 28px;
  height:28px;
  margin-right:40px;
  padding:40px;
}

.bigCheckText{
  padding-left:20px; 
  padding-top:10px;
}

.white{
  color:#fff;
}

.rowOther{
  background-color:#ce5a9c;
  color:#fff;
}

body.modal {
padding-right: 0px !important;
overflow-y: auto;
}


.btn.btn-success {
    color: #ffffff;
    background-color: #25aae1;
    background-image: linear-gradient(to bottom, #25aae1, #0f75bc);
    border-color: #0f75bc #0f75bc #0f74bc;
  text-shadow:none;
  margin-top:15px;
  margin-bottom:15px;
}
.btn.btn-success:hover {
    color: #ffffff;
    background-color: #0f75bc;
    background-image: linear-gradient(to bottom, #0f75bc, #0f75bc);
    border-color: #0f75bc #0f75bc #0f74bc;
}

th{
  color:#305252;
}

.nopadding{
  padding:0 !important;
  margin:0 !important;
}



/**mobile size blocks**/
.box1Mobile{background:url(http://www.mariondesigns.co.za/images/graphic.jpg);}
.box2Mobile{background:url(http://www.mariondesigns.co.za/images/web.jpg);}



#boxMobile    {   width:100%;
            box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
            /**border-bottom:2px solid #fff;
            border-right:2px solid #fff;
            margin:5% auto 0 auto; 
            background:url(http://www.thecollectivebrand.co.za/image/both.jpg);**/
        background-size:cover;
      overflow:hidden;
      
      
      }

#overlayMobile    {  background:rgba(0,0,0,.75);
               text-align:center;
               padding:45px 0 66px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}

#boxMobile #overlayMobile {
               opacity:1;}
			   
			   
/****************************/			   





.box1{background:url(http://www.thecollectivebrand.co.za/test/graphic.jpg);}
.box2{background:url(http://www.thecollectivebrand.co.za/test/web.jpg);}



#box    {   width:100%;
            box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
            /**border-bottom:2px solid #fff;
            border-right:2px solid #fff;
            margin:5% auto 0 auto; 
            background:url(http://www.thecollectivebrand.co.za/image/both.jpg);**/
        background-size:cover;
      overflow:hidden;
      
      
      }

#overlay    {  background:rgba(0,0,0,.75);
               text-align:center;
               padding:45px 0 66px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}

#box:hover #overlay {
               opacity:1;}


.overText1{
  width:100%;
  position:absolute;
  font-family:Helvetica;
  font-weight:900;
  color:rgba(11,11,11,1);
  font-size:5em;
  padding-top:30%;
  padding-bottom:30px; height:0px;
  text-align: center;
  text-shadow: 2px 2px #ffffff;

}

#box:hover .overText1{
  display: none;
}

.overText2{
  width:100%;
  position:absolute;
  font-family:Helvetica;
  font-weight:900;
  color:rgba(11,11,11,1);
  font-size:5em;
  padding-top:30%;
  padding-bottom:30px; height:0px;
  text-align: center;
  text-shadow: 2px 2px #ffffff;

}

#box:hover .overText2{
  display: none;
}


#plus{  
  font-family:Helvetica;
  font-weight:900;
  color:rgba(255,255,255,.75);
  font-size:3em;
  padding-top:30px;
  padding-bottom:30px;
         
}


.packages{
	margin:0px 0 50px 0;
	/**background-color: #eeeeee;**/
	padding-top:30px;
}

.packageModalOneColour{color:#0d9263; border-color:#0d9263;}
.packageModalTwoColour{color:#732c7b; border-color:#732c7b;}
.packageModalThreeColour{color:#db5a42; border-color:#db5a42;}

.price strong{
	font-size:25px; 
	color:white;
}

.price h3{
	 color:white; 
	 font-size:40px; 
	 font-weight:bold; 
	 font-family:Helvetica; 
	 line-height:0; 
	 padding-top:40px;
}


.btn.btn-success-green {
    color: #ffffff;
    background-color: #54bc8a;
    background-image: linear-gradient(to bottom, #54bc8a, #0d663b);
    border-color: #0d663b #0d663b #0d663b;
}
.btn.btn-success-green:hover {
    color: #ffffff;
    background-color: #0d663b;
    background-image: linear-gradient(to bottom, #0d663b, #0d663b);
    border-color: #0d663b #0d663b #0d663b;
}



.btn.btn-success-blue {
    color: #ffffff;
    background-color: #4db1d0;
    background-image: linear-gradient(to bottom, #4db1d0, #157fa0);
    border-color: #157fa0 #157fa0 #157fa0;
}
.btn.btn-success-blue:hover {
    color: #ffffff;
    background-color: #157fa0;
    background-image: linear-gradient(to bottom, #157fa0, #157fa0);
    border-color: #157fa0 #157fa0 #157fa0;
}



.btn.btn-success-purple {
    color: #ffffff;
    background-color: #8f68a6;
    background-image: linear-gradient(to bottom, #8f68a6, #5c3672);
    border-color: #5c3672 #5c3672 #5c3672;
}
.btn.btn-success-purple:hover {
    color: #ffffff;
    background-color: #5c3672;
    background-image: linear-gradient(to bottom, #5c3672, #5c3672);
    border-color: #5c3672 #5c3672 #5c3672;
}


/**************/

.modal-body{
	max-height: calc(100vh - 212px);
	overflow-y: auto; 
}

.modal-title{
	font-size: 30px;
	font-weight:bold;
}


.modal-subheading{
	font-size: 22px;
	font-weight: bold;
}

.modal-desheading{
	font-size: 16px;
	font-weight: bold;
}

.modal h1{
	line-height: 100%;
	padding:0;
}

.package-heading{
	padding-top:8px;
	font-weight:bold;
}

.fa{
	color:grey;
}


/* PRICING TABLE */

.pricing_table .span4 {
    border: transparent solid;
    border-width: 5px 0;
    transition: all .5s;
}
.pricing_table .span4:hover {
    transition: all .5s;
    border: #fff solid 10px;
}
.pricing_table .span4:hover .pt_price {
    color: #fff;
}
#pricing_table .back2top {
    border: #324c68 solid 1px;
    color: #324c68;
}


.pricing_table_mid {
    padding: 30px 0;
    background: #324c68;
}

.pricing_table {
    text-align: center;
    margin: 0px 0 50px;
}


a.pricing_table_hover:link{color:#fff; text-decoration: none;}
a.pricing_table_hover:hover{color:#444;}
a.pricing_table_hover:active{color:#444;}
a.pricing_table_hover:visited{color:#fff;}


.section_intro{
  background-color:#fff;
}


.page-header-grey
{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #ededed;}

a.hoverPT:link{
  color:#fff; 
  text-decoration: none;
}

a.hoverPT:hover{
  color:#333; 
  text-decoration: none;
}

a.hoverPT:visited{
  color:#fff; 
  text-decoration: none;
}

a.hoverPT:active{
  color:#fff; 
  text-decoration: none;
}

/**Pricing**/

.pt_title {
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    background: rgba(0,0,0,0.4);
    padding: 20px 0;
    color:white;
}
.pt_price {
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,1);
    font-size: 24px;
    font-weight: 300;
    padding: 20px 0;
}
.pt_price span {
    font-size: 44px;
    font-weight: 600;
}
.pt_price sup {
    top: -18px;
}
.pt_feature {
    background: rgba(0,0,0,0.2);
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 20px 0;
    border-bottom: rgba(0,0,0,0.3) solid 1px;
}
.pt_pay {
    font-size: 28px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 40px 0;
    background: rgba(0,0,0,0.2);
}
.pt_pay a {
    color: #fff;
    text-decoration: none;
}


/**Modal Customisation**/

#myModalPack1 .modal-content{
	background-color:#fff;
}



/**mini menu**/

.navbar .navbar-header {
  background-color:#273f52;
}


@media (max-width:767px){
  .navbar-brand img{
    padding:0;
    margin-top:-5px;
    width:100px;
  }
}


/*Home Hover Images*/


a.hoverTextStyle{
  color:#cac4c2; 
  font-weight:bold;
  font-size:1em;
  pointer-events: none;
   cursor: default;

}

a.hoverTextStyle:active{
  color:#0ed7e7; 
  text-decoration: none;
}

a.hoverTextStyle:visited{
  color:#cac4c2; 
  text-decoration: none;
}

a.hoverTextStyle:hover{
  color:#0ed7e7; 
  text-decoration: none;
}

/*Services Hover Images*/

a.hoverTextStyleServices{
  color:#fff; 
  font-weight:bold;
  font-size:1em;
}

a.hoverTextStyleServices:active{
  color:#363636; 
  text-decoration: none;
}

a.hoverTextStyleServices:visited{
  color:#fff; 
  text-decoration: none;
}

a.hoverTextStyleServices:hover{
  color:#363636; 
  text-decoration: none;
}


/*Custom Package Links*/

a.customPackage{
  color:#aaff00; 
  font-weight:bold;
  font-size:1.25em;
}

a.customPackage:active{
  color:#fff; 
  text-decoration: none;
}

a.customPackage:visited{
  color:#aaff00; 
  text-decoration: none;
}

a.customPackage:hover{
  color:#fff; 
  text-decoration: none;
}