Exercise

screen.css

/* --- Reset --- */

.row {
    max-width: 1920px;
}

/* --- End Reset --- */



/* --- Animation --- */

.delay-1 {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -ms-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.delay-2 {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.delay-3 {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.delay-4 {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -ms-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.delay-5 {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.delay-6 {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.delay-7 {
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    -ms-animation-delay: 0.7s;
    -o-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

.delay-8 {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    -ms-animation-delay: 0.8s;
    -o-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.delay-9 {
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

.delay-10 {
    -webkit-animation-delay: 1.0s;
    -moz-animation-delay: 1.0s;
    -ms-animation-delay: 1.0s;
    -o-animation-delay: 1.0s;
    animation-delay: 1.0s;
}

/* --- Animation --- */



/* --- Custom Styles --- */

h1, h2, h3, h4, h5, h6 {
    font-family: "museo-slab",serif;
    font-style: normal;
    font-weight: 300;
}

p {
    font-family: "museo-sans",sans-serif;
    font-style: normal;
    font-weight: 300;
}

.header {
    padding: 20px 40px;
}

.nav {
    text-align: right;
    padding-top: 50px;
}

.nav a {
    color: #e55750;
    text-transform: uppercase;
    font-family: "museo-sans",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    margin-left: 30px;
}

.content {
    padding-top: 30px;
}

.thumbnails {
    margin: 0;
}

.thumbnails li {
    margin: 0;
    padding: 0;
}

.footer {
    padding: 40px;
    background: #e55750;
}

.footer h3 {
    color: #ffffff;
}

.footer p {
    color: #ffffff;
}

.callouts {
	padding: 40px;
}

.block {
	/*background-color: #e55750;*/
	padding: 20px;
}

.block p {
	margin-bottom: 0;
}

.block-blue {
	background-color: #56cbf8;
	color: #ffffff;
}

.block-blue h3 {
	color: #ffffff;
}

.block-yellow {
	background-color: #deff00;
	color: #56cbf8;
}

.block-yellow h3 {
	color: #56cbf8;
}

.block-green {
	background-color: #14b221;
}



/* --- End Sample Styles --- */



/* --- Media Queries --- */

/* Non-Small screens */

@media only screen and (min-width: 641px) {
    
}

/* Large screens */

@media only screen and (min-width: 1025px) {
    
}

@media only screen and (max-width: 1820px) and (min-width: 1025px) { 
    
}

@media only screen and (max-width: 1740px) and (min-width: 1025px) { 
    
}

@media only screen and (max-width: 1660px) and (min-width: 1025px) { 
    
}

@media only screen and (max-width: 1580px) and (min-width: 1025px) { 
    
}

@media only screen and (max-width: 1500px) and (min-width: 1025px) { 
    
}

@media only screen and (max-width: 1420px) and (min-width: 1025px) { 
    
}

@media only screen and (max-width: 1340px) and (min-width: 1025px) { 
    
}

@media only screen and (max-width: 1260px) and (min-width: 1025px) { 
    
}

@media only screen and (max-width: 1180px) and (min-width: 1025px) { 
    
}

@media only screen and (max-width: 1100px) and (min-width: 1025px) { 
    
}

/* Medium screens */

@media only screen and (max-width: 1024px) and (min-width: 641px) { 
    
}

@media only screen and (max-width: 960px) and (min-width: 641px) { 
    
}

@media only screen and (max-width: 880px) and (min-width: 641px) { 
    
}

@media only screen and (max-width: 800px) and (min-width: 641px) { 
    
}

@media only screen and (max-width: 720px) and (min-width: 641px) { 
    
}

/* Small screens */

@media only screen and (max-width: 640px) { 
    .header {
        text-align: center;
    }
    .nav {
        text-align: center;
        padding-top: 40px;;
    }
    .nav a {
        font-size: 16px;
        margin-right: 10px;
        margin-left: 10px;
    }
}

@media only screen and (max-width: 560px) { 
    
}

@media only screen and (max-width: 480px) { 
    
}

@media only screen and (max-width: 400px) { 
    
}

@media only screen and (max-width: 320px) { 
    
}

/* --- End Media Queries --- */