/* SimpleCSS
------------------------------------------- */

/* BODY SPACING */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
body{margin:0; background-color: White; font-family:'Roboto', Helvetica, Arial, sans-serif; font-size:12px;line-height:1.5;color:white;background-image: url(IMG_0257-DWP-WP.jpg);background-repeat: no-repeat;background-size:cover;}
html{overflow-x:hidden}

/* unvisited link */
a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

.section {
  width: 100%;
  margin: 0;
  padding: 0;
 display:table;
}

.content {
  margin: auto;
  width: 100%;
  max-width: 1100px;
  padding: 24;
  display:table;
}

.col {
  display: table-cell;
  margin: auto;
}


.hide-on-large-screens {display: none;}
.hide-on-small-screens {display: none;}
.image {max-width:100%; height:auto}


/* Typography */
.pagetitle { font-size: 80px; line-height: 80%;font-family: Roboto;}

.h1 { font-size: 80px;line-height: 40%; font-family: Roboto;}
.h2 { font-size: 38px;line-height: 1.2; font-family: Roboto;} 
.h3 { font-size: 32px; font-family: Roboto;}
.h4 { font-size: 26px;line-height: 1.2; font-family: Roboto;}
.h5 { font-size: 22px;line-height: 1.2; font-family: Roboto;} 
.h6 { font-size: 12px;} 


/* FONT ALIGNING */
.font-left{text-align:left!important}
.font-right{text-align:right!important}
.font-justify{text-align:justify!important}
.font-centered{text-align:center!important}
.tiny{font-size:10px!important}
.widetext{font-size:14px!important;letter-spacing: 6px;}

/* MULTI COLUMNS
------------------------------------------- */
.column-full { display: table-cell; width: 100%; padding: 20px; }
.column-half { display: table-cell; width: 50%; padding: 20px; }
.column-1third { display: table-cell; width: 33.33%;  padding: 16px;}
.column-2third { display: table-cell; width: 66.66%; padding: 20px; }
.column-1quarter { display: table-cell; width: 25%; padding: 20px; }
.column-3quarter { display: table-cell; width: 75%; padding: 20px; }
.row:after { content: ""; display: table; clear: both;}

.leftcol { display: table-cell; width: 220px; padding: 20px; height: 800px;}
.rightcol { display: table-cell; column-fill: balance; padding: 20px; border: 1px grey;}


/* CONTENT PADDING
------------------------------------------- */
.padding-10{padding-top:10px!important;padding-bottom:10px!important}
.padding-20{padding-top:20px!important;padding-bottom:20px!important}
.padding-30{padding-top:30px!important;padding-bottom:30px!important}
.padding-40{padding-top:40px!important;padding-bottom:40px!important}
.padding-60{padding-top:60px!important;padding-bottom:60px!important}
.padding-80{padding-top:80px!important;padding-bottom:80px!important}
.padding-100{padding-top:100px!important;padding-bottom:100px!important}
.padding-120{padding-top:120px!important;padding-bottom:120px!important}
.padding-140{padding-top:140px!important;padding-bottom:140px!important}
.padding-160{padding-top:160px!important;padding-bottom:160px!important}
.padding-180{padding-top:180px!important;padding-bottom:180px!important}
.padding-200{padding-top:200px!important;padding-bottom:200px!important}

.padding-top-10{padding-top:10px!important}
.padding-top-20{padding-top:20px!important}
.padding-top-30{padding-top:30px!important}
.padding-top-40{padding-top:40px!important}
.padding-top-60{padding-top:60px!important}
.padding-top-80{padding-top:80px!important}
.padding-top-100{padding-top:100px!important}
.padding-top-120{padding-top:120px!important}
.padding-top-140{padding-top:150px!important}
.padding-top-160{padding-top:150px!important}
.padding-top-180{padding-top:150px!important}
.padding-top-200{padding-top:200px!important}

.padding-bottom-10{padding-bottom:10px!important}
.padding-bottom-20{padding-bottom:20px!important}
.padding-bottom-30{padding-bottom:30px!important}
.padding-bottom-40{padding-bottom:40px!important}
.padding-bottom-60{padding-bottom:60px!important}
.padding-bottom-80{padding-bottom:80px!important}
.padding-bottom-100{padding-bottom:100px!important}
.padding-bottom-120{padding-bottom:120px!important}
.padding-bottom-140{padding-bottom:150px!important}
.padding-bottom-160{padding-bottom:150px!important}
.padding-bottom-180{padding-bottom:150px!important}
.padding-bottom-200{padding-bottom:200px!important}

.spacer-100{padding-top:50px!important;padding-bottom:50px!important}
.spacer-200{padding-top:100px!important;padding-bottom:100px!important}

/* Spacers */
.spacer-5 { padding: 5px 0; }
.spacer-10 { padding: 10px 0; }
.spacer-15 { padding: 15px 0; }
.spacer-20 { padding: 20px 0; }
.spacer-30 { padding: 30px 0; }
.spacer-40 { padding: 40px 0; }
.spacer-50 { padding: 50px 0; }

/* TEXT COLORS */
.text-blue,.hover-text-blue:hover{color:#2196F3!important}
.text-light-blue,.hover-text-light-blue:hover{color:#87CEEB!important}
.text-blue-grey,.hover-text-blue-grey:hover,.text-blue-gray,.hover-text-blue-gray:hover{color:#607d8b!important}
.text-green,.hover-text-green:hover{color:#4CAF50!important}
.text-light-green,.hover-text-light-green:hover{color:#8bc34a!important}
.text-indigo,.hover-text-indigo:hover{color:#3f51b5!important}
.text-orange,.hover-text-orange:hover{color:#ff9800!important}
.text-pink,.hover-text-pink:hover{color:#e91e63!important}
.text-red,.hover-text-red:hover{color:#f44336!important}
.text-white,.hover-text-white:hover{color:#fff!important}
.text-black,.hover-text-black:hover{color:#000!important}
.text-grey,.hover-text-grey:hover,.text-gray,.hover-text-gray:hover{color:#757575!important}
.text-light-grey,.hover-text-light-grey:hover,.text-light-gray,.hover-text-light-gray:hover{color:#f1f1f1!important}
.text-dark-grey,.hover-text-dark-grey:hover,.text-dark-gray,.hover-text-dark-gray:hover{color:#3a3a3a!important}
.text-grey3,.hover-text-grey3:hover{color:#9c9c9c!important}
.text-grey4,.hover-text-grey4:hover{color:#717171!important}
.text-grey5,.hover-text-grey5:hover{color:#474747!important}




/* CONTENT COLORS 
------------------------------------------- */


.gradient {
  background-color: DodgerBlue; /* For browsers that do not support gradients */
 background-image: linear-gradient(to right, BlueViolet, MediumSlateBlue, DodgerBlue);
}

.White		{background-color:white;}

/* REDS */
.IndianRed		{background-color:IndianRed}
.Salmon			{background-color:Salmon}
.Crimson		{background-color:Crimson}
.Red			{background-color:Red}
.DarkRed		{background-color:DarkRed}

/* PINKS */
.Pink  			{background-color:Pink}
.HotPink		{background-color:HotPink}
.PaleVioletRed	{background-color:PaleVioletRed}

/* ORANGES */
.Coral 			{background-color:Coral}
.DarkOrange 	{background-color:DarkOrange}
.Orange 		{background-color:Orange}

/* YELLOWS */
.Gold 			{background-color:Gold}
.Yellow 		{background-color:Yellow}
.LightYellow 	{background-color:LightYellow}
.Lavender 			{background-color:Lavender}

.MediumPurple 			{background-color:MediumPurple}
.BlueViolet 			{background-color:BlueViolet}
.Purple			{background-color:Purple}
.Indigo			{background-color:Indigo}
.SlateBlue 			{background-color:SlateBlue}
.DarkSlateBlue			{background-color:DarkSlateBlue;color: white}
.DeepSkyBlue 			{background-color:DeepSkyBlue}
.Lavender 			{background-color:Lavender}

/* GREYS */
.LightGray 			{background-color:#F3F2F2}
.DarkGray 			{background-color:DarkGray}
.DimGray 			{background-color:DimGray}
.SlateGray			{background-color:SlateGray}

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }


/* --- 640 MOBILE VIEW VIEW --- */
@media only screen and (max-width: 640px) { 
  body { background-color: #ffffff;}
  .pagetitle { font-size: 65px; line-height: 80%;font-family: Roboto;}

.hide-on-small-screens {display: none;}
.hide-on-large-screens {display: block;}
.column-1third, .column-2third, .column-1quarter, .column-3quarter {display: block;width: 100%;}
}