@charset "utf-8";
/* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
	
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
 	  


* div .msg-body p{
	font-size:20px;
	font-family:"cambria", Arial, Helvetica, sans-serif;

}	

* div .msg-body li {
	font-size:18px;
	font-family:"cambria", Arial, Helvetica, sans-serif;

}

  
.msg-body{
	width:92%;
	height:auto;
	margin:auto;
	padding:0px;
	
}
}







body {
	width:100%;
	height:100%;
	margin:auto;
}

header, nav, main, section, article, aside, footer{
	padding:0;
	margin:0;
	display:block;
	}
	
.dontel-communications{
	width:100%;
	padding:0;
  	margin:auto;
	}

.pageheader-wrapper{
	width: 100%;
	margin:auto;
	padding:0px;
	}

.pageheader-wrapper img{
	width:100%;
  	margin:auto;
	height:auto;
	}
	
	
	
/* Add a black background color to the top navigation */
.topnav {
  background-color:#000;
  overflow: hidden;
  box-shadow:#999;
  padding:0px;
}





/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  text-align: center;
  padding: 20px 30px;
  padding-right:40px;
  font-size: 16px;
  text-decoration:none;
  color:#fff;
  text-decoration:none;


}

/* Change the color of links on hover */
.topnav a:hover {
	color: #fff;
	font-weight:bold;
  background-color: #036;
  border-left:thin solid #fff;
}


.topnav .icon:hover {
	color: #fff;
	font-weight:bold;
  background-color: #036;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}



.msg-body{
	width:90%;
	height:auto;
	margin:auto;
	padding:0;
	
}

.msg-body p{
	font-size:18px;
	
}


.msg-body li {
	font-size:16px;
	font-family:"cambria", Arial, Helvetica, sans-serif;

}

.msg-content{
	background-color:#104278;
	width:100%;
	border-bottom-right-radius:120px;
	color:#fff;
	padding:10px 0;
	height:auto;
	}
	

.middlepage2{
	background-color:#f90;
	width:100%;
	color:#FFF;
	min-height:400px;
	border-top-right-radius:220px;
	}
	
.middlepage3{
	background-color: #06F;
	width:100%;
	border-bottom-right-radius:20px;
	color:#FFF;
	min-height:400px;
	}	



.bottompg{
	width:100%;
	color:#0A1832;
	padding:20px 0px;
	background-color: #0C1B2C;
	height:400px;
	}

.title{
	border-radius:20px;
	max-width:170px;
	margin: auto;
	padding:8px 0px;
	color:#000;
	background-color:#fff;
	font-weight:bold;
	box-shadow:#666;
		}

.title2{
	margin: auto;
	padding:8px 0px;
	color:#0CF;
		}


		
.pagetitle{
	color:#0CF;
	
	}
		
.socialmedia {
	text-decoration:none;
	background-color:#fff;
	padding:10px 0px;
	text-align:center;
	}

.soc-handle{
	padding-left:10px;
	text-decoration:none;

	}
		
.end{
	padding:10px 10px;
	
	
	}	
	

/* Clear floats after the columns */

* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #F90;
  color: white;
  padding: 12px 70px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #093 ;
  color: #FFF;
  font-weight:bold;
}


.form  {
  border-radius: 15px;
  padding: 30px;
  width: 600px;
  margin: auto;
}

	
.col-25 {
  width: 100%;
  color:#fff;
  font-size:16px;
}

.col-75 {
  float: left;
  width: 100%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.col-25, .col-75, input[type=submit] {
	  display:block;
	  width:100%;
  }
  
  
.form  {
  border-radius: 15px;
  padding: 15px;
  width:340px;
  margin: auto;
}
  
  
  
  .end{
	border-bottom: thick  #fff solid; 
	padding-bottom:30px;
	padding-top:20px;
	background-color:#0C1B2C;
	
	
	}
	
	
	.bottompg{
	width:100%;
	color:#0A1832;
	padding:20px 0px;
	background-color:#0C1B2C;
	}	


}


.terms{
	size:12px;
	background-color: #036;
	color:#FFF;
	
	}
	
/* Style the links inside the navigation bar */
.office {
  font-size: 16px;

}
	
	/* Add a black background color to the top navigation */
.endnav {
  overflow: hidden;
  box-shadow:#999;
  padding:0px;
  width:100%;
  margin:auto;
}


.endnav li{
  padding: 8px 30px;
  font-size: 16px;
  list-style:none;
  }


/* Style the links inside the navigation bar */
.endnav li a {
  text-decoration:none;
  color:#fff;
}

/* Change the color of links on hover */
.endnav li a:hover {
  border-radius:7px;
  margin:auto;
  color: #000;
  font-weight:bold;
  background-color: #fff;
  padding: 14px 30px;

}


.line{
	height:300px;
	background-color:#FC0;
	margin:auto;
	padding:20px 0px;
	
	}
	
.joinus {
	cursor:pointer;
	border-radius:26px;
	padding:4px 14px;

	}