/*Layout Setup*/
* {box-sizing: border-box;}
.row::after {
  	content: "";
	clear: both;
  	display: table;
}
[class*="col-"] {
	float: left;  	
	border: 0px solid white;
}


/*style and content*/

.header {
	background-color: #FFFFFF;
	border-style: none none solid none;
	border-width: 2.5px;
	border-color: #171717;
	max-height: 10%;
}

.header img {
	padding-top: 0.5%;
	padding-left: 2%;
	padding-bottom: 0.5%;
	height: 100px;
	width: 300px;
	max-height: 100%;
	max-width: 100%;
}

.title {
	width: 100%;
	max-height: 10%;
	font-family: "Raleway", "Arial", sans-serif;
	background-color: #3399FF;
	background-image: linear-gradient(60deg, 		rgba(0,89,179,1) 0%, rgba(51,153,255,1) 50%, rgba(0,89,179,1) 100%);
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

.title h1 {
	padding: 50px 10%;
	font-size: 40px;
	color: #FFFFFF;
	text-align: left;
}

.title img {
	padding: 1% 1% 1% 1%;
}

body {
  	font-family: "Raleway", "Arial", sans-serif;
	background-color: #F5F5F5;
	justify-content: center;
  	align-items: center;
}

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


.main {
	border-style: none;
}

.leftcontentbox {
	font-family: "Raleway", "Arial," sans-serif;
	background-color: #3399FF;
	background-image: linear-gradient(0deg, rgba(0,89,179,1) 0%, rgba(51,153,255,1) 50%, rgba(0,89,179,1) 100%);
	color: #FFFFFF;
	font-size: 24px;	
	width: 90%;
	padding: 2% 2% 2%;
	margin: 2% 5%;
	border-style: solid;
	border-color: #171717;
	border-radius: 11px;
}

.leftcontentbox img {
	padding-top: 2%;
	padding-right: 2%;
	padding-bottom: 2%;
}

.rightcontentbox {
	font-family: "Raleway", "Arial," sans-serif;
	background-color: #3399FF;
	background-image: linear-gradient(0deg, rgba(0,89,179,1) 0%, rgba(51,153,255,1) 50%, rgba(0,89,179,1) 100%);
	color: #FFFFFF;
	font-size: 24px;	
	width: 90%;
	padding: 2% 2% 2%;
	margin: 2% 5%;
	border-style: solid;
	border-color: #171717;
	border-radius: 11px;
}

.rightcontentbox img {
	padding-top: 2%;
	padding-left: 2%;
	padding-bottom: 2%;
}

.content {
	font-family: "Raleway", "Arial", sans-serif;
	background-color: #3399FF;
	background-image: linear-gradient(0deg, rgba(0,89,179,1) 0%, rgba(51,153,255,1) 50%, rgba(0,89,179,1) 100%);
	color: #FFFFFF;
	font-size: 24px;	
	width: 90%;
	padding: 2% 2% 5%;
	margin: 2% 5%;
	border-style: solid;
	border-color: #171717;
	border-radius: 11px;
}

.content img {
	padding-bottom: 2%;
}

.footer{
	font-family: "Raleway", "Arial", sans-serif;
	background-color: #3399FF;
	background-image: linear-gradient(0deg, rgba(0,89,179,1) 0%, rgba(51,153,255,1) 50%, rgba(0,89,179,1) 100%);
	color: #FFFFFF;
	font-size: 24px;	
	width: 100%;
	padding: 2% 2% 5%;
	border-style: solid;
	border-color: #171717;
}

.gridfoot {
	background-color: #3399FF;
	background-image: linear-gradient(0deg, 	rgba(0,89,179,1) 0%, rgba(51,153,255,1) 50%, rgba(0,89,179,1) 100%);
}

.button {
	border-style: solid;
   	 border-color: #FFFFFF;
    	border-radius: 10px;
    	background-color: #CC9900;
	color: #FFFFFF;
   	padding: 10px;
    	text-align: center;
    	transition-duration: 0.4s;
}

.button:hover {
	background-color: #0066cc;
    	border-color: #ffffff;
}

/*navigation dropdown*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 1.5% 0;
	float: right;
	overflow: hidden;
	background-color: #ffffff;
	border-style: none;
}

li {
  float: left;
}

li a, .dropbtn {
	display: inline-block;
	color: black;
  	font-size: 28px;
  	font-variant: small-caps;
  	font-family: "Raleway", "Arial", sans-serif;
  	text-align: center;
  	padding: 12px 14px;
  	text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
	background-color: #3399FF;
	color: #ffffff;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #002080;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: #ffffff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover 
{background-color: #3399ff;}
.dropdown:hover .dropdown-content {
  display: block;
}

/*fonts*/

h1 {
	padding: 0px;
	font-family: "Raleway", "Arial", sans-serif;
	font-size: 50px;
	font-weight: bold;
}
.headline {
	padding: 12px;
	font-family: "Raleway", "Arial", sans-serif;
	font-size:3em;
    	font-weight:bold;
	text-align:center;
	color: #FFFFFF;
}
.sub_headline {
	color: #FFFFFF;
	font-family: "Raleway", "Arial", sans-serif;
	font-size:2em;
	font-weight:bold;
	text-align:center;
	padding-top: 15px;
	padding-bottom: 10px;
}
.sub_text {
	color: #FFFFFF;
	font-weight: bold;
}
.regular_text {
    	font-family: "Raleway", "Arial", sans-serif;
    	font-size: 1em;
	padding-left: 10px;
	padding-right: 10px;
}
.ul_text {
	text-align:center;
    	list-style:none;
	color: #FFFFFF
}
.li_padding {
	padding:10px;
	font-size:x-large;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 10%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 90%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}