@charset "iso-8859-1";

		html {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			background-color: #f3f3f3;
		}
		
		body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			min-width: 320px;
			background-color: #f3f3f3;
			display: none;
		}
			
		h1, h2, h3, h4, h5, p {
			margin: 0 5px;
			padding: 0;
		}

		h1 {
			font-family: eras_demi_itcregular;
			font-weight: bolder;
			font-size: 20pt;
		}
				
        h2 {
            font-family: "monotype_corsivaregular";
            font-size:30px;
            color:black;
        }

        h3{
            font-family: eras_demi_itcregular;
            font-size:22px;
            color:black;
            text-align: left;
        }
        
        h3.portfolio {
            padding-top:25px;
            margin-bottom: 10px;
            clear: both;
            color: white;
        }

        h4{
            font-family: "monotype_corsivaregular",  Tahoma;
            font-size: 20px;
            color: white;
            margin: auto;
        }

        h5{
            font-family: "eras_demi_itcregular", Tahoma, Verdana;
            font-size:19px;
            color:black;
            margin: auto;
        }	

        p{
            font-family: "eras_light_itcregular";
            font-size: 15pt;
            font-weight: bolder;
			margin: 10px 5px;
        }
        
        a {
        	color: rgba(0,0,0,1.0);
        }

        /* links portfolio */
        
        .content {
        	background: #F3F3F3;
        	margin: 20px;
        	-webkit-animation: mymove 1s ease forwards; 
            -webkit-animation-delay: 0.4s; 
            animation: mymove 1s ease forwards;
            animation-delay: 0.4s;
            padding-bottom: 20px;
            -webkit-transition: all 0.3s ease-in-out; 
			-moz-transition: all 0.3s ease-in-out; 
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
        }
        
        h1.links {
        	margin: 20px auto;
        	position: relative;
			display: block;
			width: 100%;
			top: -200px;
			-webkit-animation: mymove 1s ease forwards; 
            -webkit-animation-delay: 0.4s; 
            animation: mymove 1s ease forwards;
            animation-delay: 0.4s;
        }

		.image {
			float: right;
			width: 45%;
			max-width: 710px;
			heigth: auto;
			margin: 10px 10px;
			display: inline-block;
			overflow: hidden;
			text-align: center;
			position: relative;
		}
		
		.image img {
			width: 60%;
			height: auto;
			display: block;
			margin: 10px 0;
		}
		
		.videoWrapper {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            padding-top: 25px;
            height: 0;
            max-width: 800px;
        }
        .videoWrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            max-height: 460px;
        }

		.text {
			background: #F3F3F3;
			margin: 10px;
			display: inline;
			float: left;
			width: 45%;
		}
		
		.divaroundiframe{
			background-size: cover;
			height: 800px;
			width: auto;
			-webkit-transition: all 0.3s ease-in-out; 
			-moz-transition: all 0.3s ease-in-out; 
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}
		
		iframe {
			background-size: cover;
			width: 100%;
			height: 100%;
			max-height: 100%;
		}
			
		.copyright {
			display: block;
			width: 100%;
			position: fixed;
			background-color: rgba(0,0,0,0.1);
			bottom: 0;
		}
		
		.copyright span {
			font-family: "eras_light_itcregular";
			font-size: 10pt;
			color: white;
			font-style: italic;
			text-transform: uppercase;
			margin-right: 15px;
		}
		
		.copyright span:first-of-type {
			margin-left: 180px;
		}
		
		@media screen and (min-width: 1500px) {    
            .image {
                width: 45%;
			}		
		}    
		
		@media screen and (max-width: 1200px) {    
			.divaroundiframe {
				height: 640px;
			}
		} 
		
		@media screen and (max-width: 768px) {    
			.divaroundiframe {
				height: 500px;
			}
			
			.image img {
				width: 100%;
			}
		}   
		
		@media screen and (max-width: 720px) {    
		    .image {
                width: 95%;
			}	
			
			.text {
				width: 95%;
			}
			
		}
		
		@media screen and (max-width: 600px) {    
			.copyright span {
				font-size: 9pt;
			}	

            .copyright span:first-of-type {
                 margin-left: 30px;
            }	
            
            .divaroundiframe {
				height: 300px;
			}

		}  
		
		@media screen and (max-width: 480px) {        
            .links h1 {
                font-size: 17pt;
                padding: 10px;
            }
            
            .divaroundiframe {
				height: 240px;
			}
            
        }