/*
* Copyright 2021 Phase One Website Design & Hosting
* https://www.phaseonewebsitedesign.com/
*/
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Colors ----------------------------––––––––––––––––––––––– */
/* Contents copyright Phase One Website Design & Hosting
https://www.phaseonewebsitedesign.com/
#000066 0, 0,102 Blue, dark
#10527c 19, 82,124 Blue, medium
#6a96b9 106,150,185 Blue, light
#ddb695 221,182,149 Brown, light
#ac754c 172,117, 76 Brown, medium
#714423 113, 68, 35 Brown, dark
#0f8012 15,128, 18 Green
*/
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Settings for disappearing/reappearing header area --–––––– */
body, html {background-color:#ffffff; width:100%; height:100%;}
body {padding-top:60px; z-index:2;}
header {
background:#000066; /* Blue, dark */
/*height:172px;*/ /* This hides only the header */
/*height:233px;*/ /* This hides the header and the menu */
position:fixed;
top:0;
transition:top 0.2s ease-in-out;
width:100%;
z-index:100;
}
/*.nav-up {top:-172px;}*/ /* This hides only the header */
/*.nav-up {top:-233px;}*/ /* This hides the header and the menu */
@media all and (min-width:100px) {
header {height:62px;}
.nav-up {top:-80px;}
}
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- START Responsive Dropdown Menu ––––––––--------––––––––––– */
/* https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp */
/* Add a background color to the top navigation */
.topnav {background-color:#000066; overflow:hidden;}
/* Style the links inside the navigation bar */
.topnav a {
color:#ffffff; /* link color */
display:block;
float:left;
font-size:17px;
padding:14px 15px;
text-align:center;
text-decoration:none;
}
/* Active class background color to highlight the current page */
.active {background-color:#6a96b9; color:white;}
/* Background color of topnav links, the dropdown button and the dropdown link area on hover */
.topnav a:hover, .dropdown:hover .dropbtn {background-color:#10527c; border-radius:0; color:white;}
/* Background color of dropdown links on hover (for some reason, changing the value for background-color has no effect right now) */
.dropdown-content a:hover {background-color:#10527c;}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {display:none; color:white;}
/* Dropdown container - needed to position the dropdown content */
.dropdown {float:left; overflow:hidden;}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
background-color:inherit;
border:none;
color:#ffffff;
font-family:inherit;
font-size:17px;
font-weight:normal;
height:55px;
margin:0;
outline:none;
padding:10px 15px;
text-transform:capitalize;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); display:none; min-width:160px; position:absolute; z-index:1;}
/* Style the links inside the dropdown */
.dropdown-content a {
background-color:#10527c;
color:#ffffff;
display:block;
float:none;
padding:12px 16px;
text-align:left;
text-decoration:none;
}
/* Style the links inside the dropdown */
.dropdown-content a:hover {background-color:#6a96b9; color:#ffffff;}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {display:block; padding-top:3px;}
/* When the screen is less than the width specified below, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media (min-width:100px) {
/*.topnav {margin-left:1%;}*/
}
@media (min-width:300px) {
/*.topnav {margin-left:2%;}*/
}
/* When the screen is less than the width specified below, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media all and (max-width:653px) {
.icon {color:#ffffff;}
.topnav a:not(:first-child), .dropdown .dropbtn {display:none;}
.topnav a.icon {display:block; float:right;}
}
/* 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 all and (max-width:653px) {
.topnav.responsive {position:relative;}
.topnav.responsive a.icon {position:absolute; right:0; top:0;}
.topnav.responsive a {display:block; float:none; text-align:left;}
.topnav.responsive .dropdown {float:none;}
.topnav.responsive .dropdown-content {position:relative;}
.topnav.responsive .dropdown .dropbtn {display:block; text-align:left; width:100%;}
}
/* ------- END Responsive Dropdown Menu ––––––----––––––––––––––––––– */
/* -------------------------------------------––––––––––––––––––––––– */
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Div Backgrounds -------------------––––––––––––––––––––––– */
.whiteBg {background-color:#ffffff; padding:15px;}
.whiteBgP {padding-bottom:0; padding-top:25px; text-align:center;}
.lightBg {background-image:url("../images/div-light-bg.jpg"); background-position:center; background-repeat:no-repeat; background-size:cover; border-bottom:3px solid #10527c; padding:15px;}
.darkBg {background-image:url("../images/div-dark-bg.jpg"); background-position:center; background-repeat:no-repeat; background-size:cover; border-bottom:3px solid #10527c; padding:15px;}
.paginationBg {background-color:#ffffff; border-bottom:3px solid #10527c; padding:15px 5px 15px 5px;}
.pagination {display:inline-block;}
.pagination a {border:1px solid #6a96b9; border-radius:5px; color:black; float:left; margin:0 4px; padding:8px 16px; text-decoration:none !important; transition:background-color .3s;}
.pagination a.active {background-color:#000066; border-radius:5px; color:white;}
.pagination a:hover {background-color:#6a96b9; color:#ffffff;}
.pagination a:hover:not(.active) {background-color:#6a96b9;}
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Images ----------------------------––––––––––––––––––––––– */
.img-border {border:2px solid #10527c;}
.img-responsive {box-sizing:border-box; max-width:100%;}
.img-circle {border-radius:50%; border:1px solid #006699;}
.img-circle-160 {border-radius:50%; border:1px solid #006699; width:160px; height:auto;}
.div-for-imgs-outer-container-100pct {align-items:center; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; width:100%;}
.caption {font-size:12px; font-weight:bold; text-align:center;}
.div-for-imgs-wcaption-centered {
background-color:#ff9;
font-size:12px;
margin-bottom:12px;
margin-top:15px;
padding-bottom:5px;
text-align:center;
}
.float-left {float:left; margin-bottom:7px; margin-right:10px; margin-top:7px;}
.float-right {float:right; margin-bottom:7px; margin-left:10px; margin-top:7px;}
.float-none-then-left, .float-none-then-right {text-align:center;}
@media all and (min-width:100px) {
.float-none-then-left, .float-none-then-right {display:block; float:none; margin-left:auto; margin-right:auto; margin-top:7px; margin-bottom:7px;}
}
/*
@media all and (min-width:350px) {
.float-none-then-left {float:left; margin-top:7px; margin-right:10px; margin-bottom:7px; margin-left:0; max-width:50%; height:auto;}
.float-none-then-right {float:right; margin-top:7px; margin-right:0; margin-bottom:7px; margin-left:10px; max-width:50%; height:auto;}
}
@media all and (min-width:660px) {
.float-none-then-left {display:block; float:left; margin-top:7px; margin-right:10px; margin-bottom:7px; margin-left:0; max-width:60%; height:auto;}
.float-none-then-right {display:block; float:right; margin-top:7px; margin-right:0; margin-bottom:7px; margin-left:10px; max-width:60%; height:auto;}
}
*/
@media all and (min-width:600px) {
.float-none-then-left {display:block; float:left; margin-top:7px; margin-right:10px; margin-bottom:7px; margin-left:0; max-width:80%; height:auto;}
.float-none-then-right {display:block; float:right; margin-top:7px; margin-right:0; margin-bottom:7px; margin-left:10px; max-width:80%; height:auto;}
}
@media all and (min-width:1000px) {
.float-none-then-left {display:block; float:left; margin-top:7px; margin-right:10px; margin-bottom:7px; margin-left:0; max-width:100%; height:auto;}
.float-none-then-right {display:block; float:right; margin-top:7px; margin-right:0; margin-bottom:7px; margin-left:10px; max-width:100%; height:auto;}
}
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Typography ------------------------––––––––––––––––––––––– */
@font-face{
font-family:'Fineliner';
src:url('fineliner-script.eot');
src:url('fineliner-script.eot?#iefix') format('embedded-opentype'),
url('fineliner-script.woff') format('woff'),
url('fineliner-script.ttf') format('truetype'),
url('fineliner-script.svg#webfont') format('svg');
}
em {color:#10527c; font-weight:bold;}
p {font-size:1.2em;}
p.indent {margin-left:90px; text-indent:-30px;}
h2, h3, h4, h5, h6 {color:#10527c; font-family:'Fineliner', Georgia, "Times New Roman", Times, serif; font-weight:bold; letter-spacing:1px; margin-bottom:7px; padding:15px 0 0 0;}
h2 {font-size:34px;}
h3 {font-size:30px;}
h4 {font-size:28px;}
h5 {font-size:24px;}
h6 {font-size:20px;}
h1.inline, h2.inline, h3.inline, h4.inline, h5.inline, h6.inline {display:inline;}
.sub {line-height:0.2em; position:relative; top:0.3em; font-size:0.8em;}
.sup {line-height:0.2em; position:relative; bottom:0.5em; font-size:0.8em;}
.sub-b {position:relative; top:0.12em;}
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Links -----------------------------––––––––––––––––––––––– */
/* For links, list them in this order:"link-visited-hover-active", or "LVHA", or LoVeHAte*/
a:link {color:#009900; text-decoration:underline;}
a:visited {color:#009900; text-decoration:underline;}
a:hover {color:#000066; text-decoration:none;}
a:active {color:#000066; text-decoration:none;}
a.nav:link {color:#ffffff; font-weight:normal; text-decoration:none;}
a.nav:visited {color:#ffffff; font-weight:normal; text-decoration:none;}
a.nav:hover {color:#ffffff; font-weight:normal; text-decoration:none;}
a.nav:active {color:#ffffff; font-weight:normal; text-decoration:none;}
a.reverse:link {color:#1eb491; text-decoration:underline;}
a.reverse:visited {color:#1eb491; text-decoration:underline;}
a.reverse:hover {color:#339933; text-decoration:none;}
a.reverse:active {color:#1eb491; text-decoration:none;}
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Buttons ---------------------------––––––––––––––––––––––– */
/*
*/
.button-plain {
background-color:rgba(255,255,255,.2);
border:2px solid #white;
border-radius:10px;
font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin:0px 15px 0px 15px;
padding:0px 15px 40px 15px !important;
transition:0.5s;
}
.button-plain a {color:#ffffff; text-decoration:none;}
.button-plain:hover {background-color:rgba(255,255,255,1); border:2px solid #006699; color:unset; color:#ffffff; cursor:pointer; font-style:italic;}
.button-plain:hover a {color:unset; color:#006699;}
.button-blue {
background-color:unset;
background-color:rgba(19,82,124,.7);
border:2px solid #000066;
border-radius:10px;
color:unset;
color:#ffffff;
font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight:bold;
margin:0px 15px 0px 15px;
padding:0px 15px 40px 15px !important;
transition:0.5s;
}
.button-blue a {color:unset; color:#000000; font-weight:bold; text-decoration:none;}
.button-blue:hover {background-color:#10527c; border:2px solid #006699; color:unset; color:#ffffff; cursor:pointer; font-style:italic;}
.button-blue:hover a {color:unset; color:#ffffff;}
.button-green {
background-color:#1ec279;
border:2px solid #1ec279;
border-radius:10px;
font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin:0px 15px 0px 15px;
padding:0px 15px 40px 15px !important;
transition:0.5s;
}
.button-green a {color:#ffffff; text-decoration:none;}
.button-green:hover {background-color:rgba(255,255,255,0); border:2px solid #ffffff; color:unset; color:#ffffff; cursor:pointer; font-style:italic;}
.button-green:hover a {color:unset; color:#1ec279;}
.button-yellow {
background-color:#FC0;
border:2px solid #FC0;
border-radius:10px;
font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin:0px 15px 0px 15px;
padding:0px 15px 40px 15px !important;
transition:0.5s;
}
.button-yellow a {color:#ffffff; text-decoration:none;}
.button-yellow:hover {background-color:rgba(255,255,255,0); border:2px solid #ffffff; color:unset; color:#ffffff; cursor:pointer; font-style:italic;}
.button-yellow:hover a {color:unset; color:#FC0;}
.button-red {
background-color:#F00;
border:2px solid #F00;
border-radius:10px;
font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin:0px 15px 0px 15px;
padding:0px 15px 40px 15px !important;
transition:0.5s;
}
.button-red a {color:#ffffff; text-decoration:none;}
.button-red:hover {background-color:rgba(255,255,255,0); border:2px solid #ffffff; color:unset; color:#ffffff; cursor:pointer; font-style:italic;}
.button-red:hover a {color:unset; color:#F00;}
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Product Box -----------------------––––––––––––––––––––––– */
.product-container {background-color:rgba(255,255,255,1); border:1px solid #10527c; border-radius:10px; padding:10px;}
.product-container p {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;}
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Miscellaneous ---------------------––––––––––––––––––––––– */
/*hr {border-bottom:3px solid #10527c; padding:15px 5px 8px 5px;}*/
hr {border-bottom:3px solid #10527c;}
ul.no-bullet {list-style-type:none; margin:0; padding:0;} /* Remove the disk so a new one can be styled */
li.in-content30 {display:block; font-size:1.2em; line-height:1.35; margin-left:20px; margin-bottom:25px; padding-left:35px; position:relative;}
li.in-content30:before {
background-image:url("../images/li-bullet-checkmark.png");
background-position:0px 0px;
content:"";
height:30px;
left:0px;
position:absolute;
top:-3px;
width:30px;
}
ul.in-content {list-style-type:none;} /* Remove the disk so a new one can be styled */
ul li.in-content { /* Now add the new styling */
background:url("../images/li-bullet-checkmark.png") no-repeat top left;
background-position:0 3px; /* Adjusts the vertical position of the bullet */
line-height:1.5625;
padding:0 0 0px 25px; /* Adjusts the distance between the bullet and the text */
margin-left:1em;
}
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Footer ----------------------------––––––––––––––––––––––– */
footer {background-color:#000066; margin:0; margin-top:20px; padding:10px 0 15px 0; width:100%;}
footer p {color:#ffffff; font-size:16px; margin:0; padding:0 10px;}
footer a {font-size:16px; font-weight:normal; margin:0; padding:1px 3px; text-decoration:none;}
footer a:link, footer a:visited {color:#ffffff; font-weight:normal; text-decoration:none;}
footer a:hover, footer a:active {color:#6a96b9; font-weight:normal; text-decoration:underline;}
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Labels ----------------------------––––––––––––––––––––––– */
label {display:inline-block; margin-bottom:5px; font-weight:bold;}
.label {border-radius:.25em; color:#ffffff; display:inline; font-size:75%; font-weight:bold; line-height:1; padding:.2em .6em .3em; text-align:center; vertical-align:baseline; white-space:nowrap;}
.label[href]:hover, .label[href]:focus {color:#ffffff; text-decoration:none; cursor:pointer;}
.label:empty {display:none;}
.label-danger {background-color:#d9534f;}
.label-danger[href]:hover, .label-danger[href]:focus {background-color:#c9302c;}
.label-default {background-color:#999999;}
.label-default[href]:hover, .label-default[href]:focus {background-color:#808080;}
.label-info {background-color:#5bc0de;}
.label-info[href]:hover, .label-info[href]:focus {background-color:#31b0d5;}
.label-primary {background-color:#428bca;}
.label-primary[href]:hover, .label-primary[href]:focus {background-color:#3071a9;}
.label-success {background-color:#5cb85c;}
.label-success[href]:hover, .label-success[href]:focus {background-color:#449d44;}
.label-warning {background-color:#f0ad4e;}
.label-warning[href]:hover, .label-warning[href]:focus {background-color:#ec971f;}
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Buttons ---------------------------––––––––––––––––––––––– */
input[type="submit"] {background-color:#090; border:2px solid #06C; color:#ffffff; line-height:2;}
input[type="submit"]:hover, input[type="submit"]:focus {background-color:transparent; border:2px solid #6a96b9; color:#6a96b9; line-height:2;}
.btn-dark-blue {
background:#000066;
background-image:-webkit-linear-gradient(top, #000066, #10527c);
background-image:-moz-linear-gradient(top, #000066, #10527c);
background-image:-ms-linear-gradient(top, #000066, #10527c);
background-image:-o-linear-gradient(top, #000066, #10527c);
background-image:linear-gradient(to bottom, #000066, #10527c);
border:solid #ffffff 1px;
-webkit-border-radius:7;
-moz-border-radius:7;
border-radius:7px;
-webkit-box-shadow:2px 2px 4px #666666;
-moz-box-shadow:2px 2px 4px #666666;
box-shadow:2px 2px 4px #666666;
color:#ffffff;
font-family:Arial;
font-size:0.8em;
padding:12px 16px 12px 16px;
text-decoration:none;
text-shadow:1px 1px 1px #006;
}
.btn-dark-blue:hover {
background:#000066;
background-image:-webkit-linear-gradient(top, #10527c, #000066);
background-image:-moz-linear-gradient(top, #10527c, #000066);
background-image:-ms-linear-gradient(top, #10527c, #000066);
background-image:-o-linear-gradient(top, #10527c, #000066);
background-image:linear-gradient(to bottom, #10527c, #000066);
text-decoration:none;
}
a.btn-dark-blue:link {color:#ffffff; text-decoration:none;}
a.btn-dark-blue:visited {color:#ffffff; text-decoration:none;}
a.btn-dark-blue:hover {color:#ffffff; text-decoration:none;}
a.btn-dark-blue:active {color:#ffffff; text-decoration:none;}
/* ------------------------------------------------------------------ */
/* ------- BEGIN the Header Area ------------------------------------ */
.headerBg {
background-image:url("../images/page-header-bg.jpg");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
border-bottom:3px solid #10527c;
display:inline-block;
width:100%;
}
.header-left-container {float:left; height:120px; position:relative; width:60%;}
.header-left {margin:0; position:absolute; top:60%; left:50%; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.header-left h1 {color:#ffffff; font-family:Georgia; font-size:20px; line-height:1.2; text-align:center; text-shadow:1px 1px 2px #ffffff;}
.header-left p {color:#ffffff; font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:1.2; text-align:center; text-shadow:1px 1px 2px #ffffff;} /* Font drop shadow: Horizontal, Vertical, Blur */
.header-right-container {float:right; height:120px; position:relative; width:40%;}
/*.header-right {float:right; padding-top:1%; padding-right:1%; text-align:center; width:39%;}*/
.header-right {margin:0; position:absolute; padding-top:2%; top:50%; left:50%; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
@media (min-width:500px) {
.header-left h1 {font-size:24px;}
}
@media (min-width:700px) {
.header-left h1 {font-size:28px;}
}
@media (min-width:900px) {
.header-left-container {height:140px;}
.header-right-container {height:140px;}
.header-left h1 {font-size:32px;}
}
@media (min-width:1000px) {
.header-left-container {height:150px;}
.header-right-container {height:150px;}
.header-right {padding-top:1.5%;}
}
@media (min-width:1100px) {
.header-left-container {height:160px;}
.header-right-container {height:160px;}
.header-left h1 {font-size:36px;}
}
@media (min-width:1200px) {
.header-left-container {height:170px;}
.header-right-container {height:170px;}
}
@media (min-width:1300px) {
.header-left-container {height:180px;}
.header-right-container {height:180px;}
}
@media (min-width:1400px) {
.header-left-container {height:200px;}
.header-right-container {height:200px;}
.header-right {padding:3.5% 0 2% 0;}
.header-left h1 {font-size:40px;}
}
@media (min-width:1500px) {
.header-left-container {height:210px;}
.header-right-container {height:210px;}
.header-right {padding-top:3%;}
}
@media (min-width:1600px) {
.header-left h1 {font-size:45px;}
}
/* ------- END the Header Area -------------------------------------- */
/* ------------------------------------------------------------------ */
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Form Styling ----------------------––––––––––––––––––––––– */
.form-width {}
.form {
background-color:#FFFFCC;
border-color:#000066;
border-radius:4px;
border-style:solid;
border-width:2px;
color:#222222;
font-size:0.8em;
/*margin:0px;*/
margin:auto;
padding:10px;
}
@media all and (min-width:100px) {
.form {width:95%;}
.form table {width:100%;}
}
@media all and (min-width:600px) {
.form {width:80%;}
}
@media all and (min-width:800px) {
.form {width:70%;}
}
@media all and (min-width:1000px) {
.form {width:60%;}
}
.form label {color:#222222; display:block; font-size:16px;}
.form input, .form textarea, .form select {
border-color:#000066;
border-radius:0px;
border-style:solid;
border-width:1px;
padding:0 5px;
width:100%;
}
.form textarea {height:100px; padding:10px;}
.form input[type=radio], input[type=checkbox] {margin:10px; width:13px;}
.form input[type=submit] {
background-color:#000066;
border:solid #339933 2px;
-webkit-border-radius:28;
-moz-border-radius:28;
border-radius:10px;
color:#ffffff;
display:block;
font-size:1em;
/*margin:0 auto;*/
padding:0;
text-transform:capitalize;
/*text-transform:capitalize;*/
width:35%;
}
.form, .form h1, .form h2 {font-family:'Arial';}
.form h1 {
background-color:#FFFFCC;
border-bottom-color:#996633;
border-bottom-style:solid;
border-bottom-width:2px;
border-radius:10px;
color:#996633;
font-size:1.6em;
margin:0px;
margin-bottom:30px;
padding:0px;
}
.form div {display:block;}
.field {margin-bottom:5px;}
.formError {color:#C00; font-weight:bold;}
.formSuccess {color:#090; font-weight:bold; text-align:center;}
.asdd, .messageasdd {display:none;} /* asdd = "Anti-Spam Don't Display". This is not shown to real users, but hopefully spambots will see it and fill it in. If it is filled in, don't send the email */
/* -------------------------------------------––––––––––––––––––––––– */
/* ------- Changes to Skeleton Styles --------––––––––––––––––––––––– */
.container {font-size:16px; padding:15px; max-width:unset;}
@media all and (min-width:100px) {
.container4content {font-size:16px; padding:15px; width:92%; margin:auto;}
.six.columns {width:100%;}
.column, .columns {margin:0;}
}
@media all and (min-width:550px) and (max-width:699px) {
.three.columns {width:100%;}
.six.columns {width:100%;}
}
@media all and (min-width:700px) {
.container4content {width:95%; margin:auto;}
.six.columns {width:48%;}
.column, .columns {margin-left:4%;}
.column:first-child, .columns:first-child {margin-left:0;}
}
@media all and (min-width:900px) {
.container4content {width:80%; margin:auto;}
}
@media all and (min-width:1100px) {
.container4content {width:960px; margin:auto;}
}
@media all and (min-width:1200px) {
.container4TwoColumns{width:70%; margin:auto;}
}
@media all and (min-width:1400px) {
.container4TwoColumns {width:65%; margin:auto;}
}
@media all and (min-width:1600px) {
.container4TwoColumns {width:60%; margin:auto;}
}