﻿html{background:#36525D;}

body{padding:0;
 font-family:verdana, arial;
 color:#fff;
 font-size:14px; 
 line-height:1.2; 
 width:100%; 
 font-weight:bold;
  max-width:980px;
  margin:15px auto;
  box-shadow: 0 0 5px 0px #082c3b;
   }

a {text-decoration: none}
a:link{color:yellow;}
a:visited{color:orange;}
.pring{margin-bottom: 15px}
.pring > *{vertical-align: middle;display: inline-block}
.centerIframe {
    text-align: center;
}
.centerIframe div { margin: 0 auto !important}
.centerIframe iframe {
    margin: 0 auto 15px;
    background: #fff;
    border: 1px solid #ccc;
    display: inline-block;
}
/*Header*/
header{ text-align:center}
header p{font-size: 13px; font-weight:normal;font-style:italic}
header p a{color:#fff !important; text-decoration:none;font-weight: bold;}
header h1{line-height: 1;font-size: 32px;font-style:italic;color: white; margin:0;font-weight:bold}
header h2{font-size: 18px;color: white;margin-bottom:0;margin-top: 10px;}

/*main*/
section{text-align:center}
section div{display:none;}
section div.active{position:relative}
section div.temp{position:absolute;top:0;left:0;right:0;max-width:100%}
section, section div{position:relative}
section > a {text-align: center;display: inline-block;margin-top: 15px}

/*footer*/
footer{text-align:center;font-size: 13px;font-family: Arial, sans-serif;background-color:#082c3b!important;}

footer p {
    margin: 0 0 1em;
}
.footerGradientframe{
    border: 3px solid #D67C1B;
    padding: 3px;
    border-radius: 8px;
    margin-top: 15px;
}
.footerGradientframe > div{border: 1px solid #FFFFFF;
    border-radius: 5px;
    overflow: hidden;padding: 0px;}
/* form */
#contact{padding: 30px;margin-top: 30px;border-top:1px solid #fff}
.service2, .service3{display:table;}
.service2 p, .service3 p{font-weight: bold;display:table-cell;vertical-align:middle;}
.service2{margin-bottom:25px;}

#contact{background-color:#236478;}
.contact1 p{font-size:34px;margin-top:0px;margin-bottom:15px;border-bottom:5px solid white;display:inline-block;line-height:45px;}
.contact1{margin-top:18px;}

.formelement1, .formelement2, .formelement3{padding:10px;width:100%; border:none}
.formelement2{margin-top:19px;}
.formelement3{height:87px}

.contact2{padding-right:20px;}
.contact3{position:relative;padding-left:10px;}

.butn1{background-color:#082c3b;border:0;position:absolute;color:white;padding:5px 10px;display:block;bottom:3px;right:0px;cursor:pointer;}

.banner a{display:none}
.banner a.activeimg{display:block!important}
.lb-banner {
    max-width: 728px;
    text-shadow: 0 0 12px #000;
    color: yellow!important;
    letter-spacing: 0.5px;
    border: 1px solid #236478;
    background-image: url(../img/waves1.jpg);
    padding: 20px;
    background-size: 100% 440px;
    font-size: 18px;
    font-weight: bold;
    margin: 0 auto;
}

/* mission */
.missionheader{position: relative;text-align: center;
    background: url("../../citizens4abetteramerica/statue.jpg");
    background-size: auto;
    background-size: 100% 100%;
}
.mainbgd.dark .missionheader p{font-style: italic;}
.missionheader div {
    background: rgba(0,0,0,0.3);
    text-align: center;
}

.missionstatemnt{ text-shadow: 0 0 10px #000;
    text-transform: capitalize;
    text-align: left;
    color: white;
    font-size: 25px;
    font-weight: bold;
    padding: 25px 0px 0 50px;
    margin: 0;
    line-height: 1.6;
    font-style: italic;
}

    
    .missionstatemnt.substatemnt {
        font-size: 17px;
        padding: 5px 0 0px 50px
    }
    .missionlogo{width: 125px;margin-top: 10px; background: none;padding: 0;}

    @media(min-width:768px){
        .missionlogo{position:absolute;right:86px; }
    }
        
    @media(max-width:767px){
        .missionlogo{ float: none;}           
    }
        

/* source*/
.container {background:rgba(0,0,0,0.2);border-bottom: 1px solid grey; padding:15px 0;margin-right: auto; margin-left: auto;position: relative;max-width:980px}
.col-12 {width: 100%}
.col-11 {width: 91.66666667%}
.col-10 {width: 83.33333333%}
.col-9 {width: 75%}
.col-8 {width: 66.66666667%}
.col-7 {width: 58.33333333%}
.col-6 {width: 50%}
.col-5 {width: 41.66666667%}
.col-4 {width: 33.33333333%}
.col-3 {width: 25%}
.col-2 {width: 16.66666667%}
.col-1 {width: 8.33333333%}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {float: left;}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;}
.clearfix{ clear:both}
.container:After,.clearfix:After{display:block;content: " "; clear:both}
img{max-width:100%; height:auto}


/*custom*/
.blackbg.container{background:#000; padding-top:20px; padding-bottom:20px}
.center{text-align:center}
.centerAto a{margin: 0 auto}
.floatnone{float:none; margin:0 auto}
.list{padding-top:0; padding-bottom:0;}
.list a:before{content:'» ';color:#fff}
.list1 p:before{content:'» ';color:#fff}
.listnew p:before {content:'» ';margin-left: -20px;}
.listnew p {padding-left: 20px;}
.clr-yellow p:before{color:yellow;}
.clr-white p:before{color:white;}
.clr-black p:before{color:black;}
.clr-blue p:before{color:blue;}

.space{margin-top:15px;}
.headimg{background-image:url("../img/3yhtgh.png");background-repeat:no-repeat;background-size: cover;padding:0;}
.listalign{padding-left:10px;}
.mainbgd{background-image:url("../img/waves.jpg");background-size: cover;}
.mainbgd.dark{background-image:url("../img/waves1.jpg");background-size: contain;}
.mainbgd.dark p{font-style:italic}
.mainbgd.dark footer p {font-size: inherit;}
.mainbgd.dark #footerdiv p{font-size: 13px; font-style: normal}
section div.adclickmedia{display: block}
.adclickmedia div{width:auto;border: none!important;background:none!important;text-align:center!important;padding:0!important;display: block!important;}
.adclickmedia img{margin: 0 auto!important}
.gradient{
    display:inline-block;
    padding: 3px;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    border-radius: 9px;
    border: 3px solid #D67C1B;
}

.gradient span{
	background: #2E277D;
    display:inline-block;
    padding:22px 28px;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid white;
}
.gradient span{
background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#0E0F35, #2E277D); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0E0F35, #2E277D); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0E0F35, #2E277D); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0E0F35, #2E277D); /* Standard syntax (must be last) */
	}

.gradient a:link{color:white;}
.gradient a:visited{color:orange;}

.gradient1 a:link{color:white;}
.gradient1 a:visited{color:orange;}
.moskyBgBanner{font-size: 18px;font-weight: bold;max-width:728px;border: 1px solid #236478;margin: 0 auto;background-image: url(../img/moskey-banner-bg.jpg);padding: 20px;}
@media(max-width:767px){
	hr{width:95%}
	 [class*=col-]{width:100%}
	 body{margin:0;padding:0}
	 .container{padding:5px}
	 header .container{padding:15px 0}
}
@media(min-width:768px){
	.listalign{padding-left:45px;}
}

@media(max-width:768px){
.container{overflow:hidden;}
}

.newheader{margin: 0 auto 10px;border: 3px solid #D67C1B;
    padding: 3px;
    border-radius: 10px; position: relative;}
.newheader .missionstatemnt{ text-shadow: 0 0 10px #000;
    text-transform: capitalize;
    text-align: left;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 25px 0px 0 20px;
    margin: 0;
    line-height: 1.6;
    font-style: italic;}

.newheader .missionstatemnt.substatemnt {
    font-size: 28px;
    padding: 30px 0 5px 0;
    text-align: center;
}
.newheader header.ocean {
    background-image: url(../img/waves2.jpg);
    border: 1px solid #FFFFFF;
    border-radius: 5px;
}
.newheader header.ocean.statue{
    background: url(../../citizens4abetteramerica/statue.jpg);
    background-size: auto;
    background-size: 100% 100%;

}
.newheader header div {
    background: rgba(0,0,0,0.5);
    text-align: center;
    padding-bottom: 1px;
}
.newheader header.ocean.statue div{
    background: rgba(0,0,0,0.3);
}
.newheader .logo {width: 200px;margin-top: 35px;}

@media (min-width: 768px){
    .newheader .logo {
    position: absolute;
    right: 30px;
}
}