/* My WEB120 Portal Website Styles */

html {
    background-color:#ccc;
}

div.wrapper {
    background-color:#fff;
    overflow:auto;
}

h1>a {
    text-decoration: none;
    color:#000;
}

.logo {
    color:red;
    margin-left:1%;
    text-shadow:1px 1px #ccc;
    font-size:1.25em;
}

/* Embed Responsively Rules! */
div.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: auto;
    max-width: 98%;
} 

div.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

footer {
	clear:both;
    text-align: center;
}

/* START RESPONSIVE STYLES */

/* DESKTOP */
@media all and (min-width:1400px) {
	
   div.wrapper {
		width:80%;
		margin:auto;
	}

    section {
		width:65%;
		float:left;
	}
	
     aside {	
		width:32%;
		float:right;
        padding-right: 1em;
        padding-top: 2em; 
	}
			
	
    img.desktop {
      		float:left;
       		width:60%;
            margin-left: 10%;
            margin-bottom: 3%;
            border-radius: 15px;
            box-shadow: 1px 13px 12px 2px #000000; 

   	 }
    
    img.tablet, img.phone {
       		 display:none;
    	}  
    
    /* Change background color of navigation on selected page */
    ul.topnav li a.selected {
        		background-color: #ccc;
        	color:#000;
   	 }
}


/* TABLET */
@media all and (min-width:737px) and (max-width:1399px) {
	
	section {
		width:60%;
		float:left;
	}
	
	aside {	
		    width: 35%;
            float: right;
            padding-right: 1em;
            padding-top: 2em;
	}
	
            img.tablet {
       		width:70%;
            padding-left: 1em;
           border-radius: 15px;
           box-shadow: 1px 13px 12px 2px #000000; 
}

           
    
           img.phone, img.desktop {
        		display:none;
           } 
    
    /* Change background color of navigation on selected page */
           ul.topnav li a.selected {
        		background-color: #ccc;
        		color:#000;
          }
  }


/* PHONE */
@media all and (max-width:736px) {
    
    img.phone {
       		width:80%; 
            margin:10%;
            border-radius: 15px;
            box-shadow: 1px 13px 12px 2px #000000; 

    }
    
    img.tablet, img.desktop {
        		display:none;
    }  
    aside {
        padding: 1em;
    }

}