@media only screen and (max-device-width: 1700px) {
 #wrapper {  
background-image: url("images/background.jpg"); 
display:inline-block; 
height:auto;
}   
#left {
width:301px;
float:left;	
margin-right:1px;
}
#right {
margin-left:1px;
width:301px;
float:right;
}
}
@media only screen and (max-device-width: 1600px) {
#wrapper {
display:inline-block; 
height:auto;
}
    
#left {
display:none;
}
}


@media only screen and (max-device-width: 1190px) {
 #wrapper {
display:inline-block; 
height:auto;
}
  h1{
 font-size: 40px;
font-weight:bold;
  line-height: 40px;
 font-weight:bold;
 padding-left: 8px;
padding-right: 8px;
} 

#blank p {
font-size:22px;
  text-align:left;
    padding-top: 20px;
    padding-right: 12px;
    padding-bottom: 0px;
    padding-left: 10px;

}
#right {
display:none;
}

}
@media only screen and (max-device-width: 855px) {
#container {
display:inline-block; 
width:100%;
}  
#wrapper {
width:100%;
}
  
#red{background-color:black;
}


h1{
 font-size: 35px;
 -webkit-text-fill-color:lightgray;
-webkit-text-stroke: 0px ; 
 font-weight:bold;
  line-height: 40px;
 font-weight:bold;
 padding-left: 8px;
padding-right: 8px;
}

#nav{
background-color:black;
}
#block {
background-color:white;
width:100%;
}
#blank{
background-color:white;
font-weight:bold;
border-top:		2px solid lightgray;
border-left:		2px solid #4f6267;
border-right:   2px solid #4f6267;
border-bottom:  2px solid #4f6267;
 width:99%;
color:black;

}
div#blank p {
font-size:22px;
  text-align:left;
    padding-top: 20px;
    padding-right: 12px;
    padding-bottom: 0px;
    padding-left: 10px;

}


#duo{
width:99%;
float:left;
text-align:left;
}
.frame {
    width:99%;
    height:auto;

}

.code {
background-color:silver;
font-weight:bold;
border-style:groove;
font-size:10px;
  text-align:left;

    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 3px;
}
#line{
width:33%;
height:350px;
background-color:#1874CD;
display:inline-block;
}
#strip{
width:24%;
height:150px;
background-color:green;
display:inline-block;
}
#content {
background-color:#E0EEEE;
}
#headline {
font-size:27px;
}
h2 {
font-size:27px;
}
#link {

width:99%;
border-style:groove;
border-width:2px;
}
.link {
        background-color:black;
        border:2px solid white;
	display:inline-block;
	color:white;
	font-size:15px;
	font-weight:bold;
	padding:2px 4px;
	text-decoration:none;
	margin:2px;

border-top:		9px solid white;
border-left:		9px solid lightgray;
border-right:		9px solid lightgray;
border-bottom:		9px solid #4f6267;


}

.link:hover {
 border-top:		9px solid #4f6267;
border-left:		9px solid lightgray;
border-right:		9px solid lightgray;
border-bottom:		9px solid white;
      
}


hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
} 
}
@media only screen and (max-device-width: 565px) {
 #wrapper {
width:100%;
} 
h1{
 font-size: 29px;
 -webkit-text-fill-color:lightgray;
-webkit-text-stroke: 0px ; 
 font-weight:bold;
  line-height: 35px;
 font-weight:bold;
 padding-left: 7px;
padding-right: 7px;
}
#headline {
font-size:25px;
}
h2 {
font-size:25px;
}
#blank p {
font-size:21px;
  text-align:left;
    padding-top: 15px;
    padding-right: 7px;
    padding-bottom: 0px;
    padding-left: 7px;

}
table {
width:90%;  
}
.frame {
    width:95%;
    height:auto;

}
img {
 width:90%;
  height:auto;
}

}
@media only screen and (max-device-width: 500px) {
#blank p {
font-size:19px;
  text-align:left;
    padding-top: 15px;
    padding-right: 6px;
    padding-bottom: 0px;
    padding-left: 6px;

}
table {
width:95%;  
}

#logo {
	border-bottom: 35px solid blue;
	border-left: 50px solid;
	border-right: 50px solid;
	height:0px;
	color:white;
        -webkit-text-fill-color:#3b4251;
        -webkit-text-stroke: 1px white;
	font-size:30px;
	background-color:white;
	text-align:center;
	font-weight:bold;
}
}


@media only screen and (max-device-width: 400px) {
 #wrapper {
width:100%;
}   
h1{
 font-size: 25px;
 -webkit-text-fill-color:lightgray;
-webkit-text-stroke: 0px ; 
 font-weight:bold;
  line-height: 30px;
 font-weight:bold;
 padding-left: 5px;
padding-right: 5px;
}
#headline {
font-size:20px;
}
h2 {
font-size:20px;
}
img {
 width:95%;
  height:auto;
}


#blank p {
font-size:18px;
  text-align:left;
    padding-top: 12px;
    padding-right: 6px;
    padding-bottom: 0px;
    padding-left: 6px;

}
table {
width:99%;  
}
}
@media only screen and (max-device-width: 320px) {
h1{
 font-size: 20px;
 -webkit-text-fill-color:lightgray;
-webkit-text-stroke: 0px white; 
 font-weight:normal;
  line-height: 25px;
 font-weight:bold;
 padding-left: 3px;
padding-right: 3px;
}
#headline {
font-size:18px;
}
h2 {
font-size:18px;
}
img {
 width:95%; 
 height:auto;
}


div#blank p {
font-size:15px;
  text-align:left;
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;

}
.code {
background-color:#708090;
font-weight:normal;
border-style:groove;
font-size:10px;
text-align:left;
padding-top: 5px;
padding-right: 1px;
padding-bottom: 5px;
padding-left: 2px;
}
}
@media only screen and (max-device-width: 250px) {
h1{
 font-size: 16px;
 -webkit-text-fill-color:white;
-webkit-text-stroke: 0px white; 
 font-weight:normal;
 line-height: 20px;
 font-weight:normal;
 padding-left: 2px;
padding-right: 2px;
}
#headline {
font-size:16px;
}
h2 {
font-size:16px;
}
div#blank p {
font-size:12px;
  text-align:left;
    padding-top: 10px;
    padding-right: 2px;
    padding-bottom: 0px;
    padding-left: 2px;
	font-weight:normal;
}
}
@media only screen and (max-device-width: 200px) {
h1{
-webkit-text-fill-color:white;
-webkit-text-stroke: 0px white;
font-family: Impact, fantasy;
 font-size: 15px;
 line-height: 15px;
 font-weight:normal;
 padding-left: 1px;
padding-right: 1px;
} 
#headline {
font-size:15px;
}
h2 {
font-size:15px;
}
#blank p {
font-size:11px;
  text-align:left;
    padding-top: 10px;
    padding-right: 1px;
    padding-bottom: 0px;
    padding-left: 1px;
	font-weight:normal;
}
}