html

{  background: #9bf; }

@-ms-viewport{ width:device-width;}

@font-face {font-family:calibri; src:url(fonts/calibri.woff);}

@font-face {font-family:trebuc; src:url(fonts/trebuc.woff);}

@font-face {font-family:trebucbd; src:url(fonts/trebucbd.woff);}

body {	
        width:92vw;
        background-color:rgba(234,234,234,0.7);
        margin-left:auto;
        margin-right:auto;
}

.headboxtop {
    	width:92vw;
        height:7vw;    	
}

.headtopleft {
        background-color:rgba(02,02,02,0.7);
    	width:33vw;
    	height:6vw;
        float:left;
    	font-family:trebucbd,arial,sans-serif;
    	font-size: 2.9vw;
    	font-weight: 400;
    	color: #ace;
        text-align:left;
        padding:1vw 0vw 0vw 5vw;       
}

.headtopright {
    	background-color:rgba(02,02,02,0.7);
    	width:54vw;
    	height:4.6vw;
        padding:2.4vw 0vw 0.0vw 0.0vw;
        float:left;
    	font-family:calibri,arial,sans-serif;
    	color:#ace;
    	font-size:2vw;
    	text-align:center;       
}

.headtopright:hover{
        background-color:rgba(18,63,234,0.3);
    	float:left;
    	font-family:calibri,arial,sans-serif;
    	color:#555;
    	font-size:2vw;
    	text-align:center;
        
}

p.treb {
    	font-family:trebuc,arial, sans-serif;
    	font-size: 1.7vw;
    	font-weight:200;
    	color: #999;
     	margin:0vw;
    	text-align:left;
        line-height:1.5vw;
}

.headboxpic {
    	width:92vw;
        height:20.5vw;   	
}


.headboxdoc {
    	width:92vw;
    	height:4.5vw;   
}

.doc {
    	background-color:rgba(02,02,02,0.7);
    	width:23vw;
    	height:3.5vw;
        padding:1vw 0vw 0.0vw 0.0vw;
        margin:0.0vw;
        float:left;
    	font-family:calibri,arial,sans-serif;
    	color:#ace;
    	font-size:2vw;
    	text-align:center;       
}

.doc:hover{
    	background-color:rgba(18,63,234,0.3);
    	float:left;
    	font-family:calibri,arial,sans-serif;
    	color:#555;
    	font-size:2vw;
    	text-align:center;        	
}


.headboxtitle {
    	width:92vw;
        height:4vw;    	  
}

.tit { 
        
background-image:linear-gradient(to right,rgba(153, 153,153,0.0),rgba(153,153,153,0.3),rgba(153,153,153,0.0));
    	width: 92vw;
    	height:3.5vw;
        padding:0.5vw;
        margin-top: 0vw;
        margin-bottom: 0vw;
    	margin-left:auto;
    	margin-right:auto;  
        float:left;
        font-family:trebucbd, arial, sans-serif;
        color:rgba(45,45,45,0.7);
    	font-size: 3.5vw;
        font-weight: 800;
    	text-align:center;       
}


.headboxdoc2 {
    	width:50vw;
        height:4.5vw;
    	padding:0vw;
        margin-top:0.5vw;
        margin-bottom:0.5vw;
    	margin-left:auto;
    	margin-right:auto;
}

.doc2 {
    	background-color:rgba(18,63,234,0.4);
    	width: 23vw;
    	height:2.5vw;
        margin:0.5vw;
    	padding:0.5vw;
    	float:left;
    	font-family:calibri,arial,sans-serif;
    	color:#555;
    	font-size:2vw;
    	text-align:center;
       
}
.doc2:hover{
        background-color:rgba(02,02,02,0.7);
    	float:left;
    	font-family:calibri,arial,sans-serif;
    	color:#ace;
    	font-size:2vw;
    	text-align:center;       
}


.headboxdoc3 {
    	width:36vw;
        height: 4vw;
    	padding:0vw;
        margin-top:1vw;
        margin-bottom:1vw;
    	margin-left:auto;
    	margin-right:auto;  
}

.doc3 {
    	background-color:rgba(18,63,234,0.4);
    	width: 34vw;
    	height: 2vw;
        margin: 0.5vw;
    	padding:0.5vw;
    	float:left;
    	font-family:calibri,arial,sans-serif;
    	color:#555;
    	font-size:1.5vw;
    	text-align:center;       
}
.doc3:hover{
        background-color:rgba(02,02,02,0.6);
    	float:left;
    	font-family:calibri,arial,sans-serif;
    	color:#ace;
    	font-size:1.5vw;
    	text-align:center;        
}


hr {
        height: 0.1vw;
        width:63vw;
background-image:linear-gradient(to right,rgba(18, 63, 234,0),rgba(18, 63, 234,0.7),rgba(18, 63, 234, 0));
        border: none;
}


.headboxpic1 {
    	width:92vw;
        height:39vw;   	
}
.headboxpic2 {
    	width:92vw;
        height:46vw;   	
}
.headboxpic3 {
    	width:92vw;
        height:49vw;   	
}
.headboxpic4 {
    	width:92vw;
        height:49vw;   	
}
.headboxpic5 {
    	width:92vw;
        height:49vw;   	
}

p {
        margin-top:0.5vw;
        margin-bottom:0.5vw;
    	margin-left:7vw;
    	margin-right:7vw;
    	font-family:calibri,arial, sans-serif;
        font-size: calc( 11px + (18 - 11) * ( (100vw - 300px) / ( 900 - 300) ));
        color:rgba(36,36,36,0.9);
    	text-indent:0vw;
    	text-align:left;   	
}

p.cen {
        margin-top:0.5vw;
        margin-bottom:0.5vw;
    	margin-left:7vw;
    	margin-right:7vw;
    	font-family:calibri,arial, sans-serif;
        font-size: calc( 11px + (18 - 11) * ( (100vw - 300px) / ( 900 - 300) ));
        color:rgba(36,36,36,0.9);
    	text-indent:0vw;
    	text-align:center;   	
}

h1  {
        font-family:trebuc,arial, sans-serif;
        font-size:2vw;
    	font-weight: 600;
    	color:rgba(45,45,45,0.7);
    	text-align: center;
        margin:0vw;
        padding:0.5vw;
}

h2  {   
        margin-top:0.5vw;
        margin-bottom:0.5vw;
    	margin-left:12vw;
    	margin-right:12vw; 
    	font-family:calibri,arial, sans-serif;
        font-size: calc( 12px + (20 - 12) * ( (100vw - 300px) / ( 900 - 300) ));
    	font-weight: 600;
    	color:rgba(45,45,45,0.8);
    	text-align:center;
        padding:0.1vw;
}

h2 span { 
        background-color:rgba(234,234,00,0.5); 
}


h3  {
    	font-family:calibri,arial, sans-serif;
    	font-size: 1.8vw;
        font-weight: 400;
    	color:#b6d7ee;
    	text-align:center;
        margin:0vw;
        padding:1vw;
}

.footer {
    	width:92vw;
    	height:3.8vw;
       	background-color:rgba(02,02,02,0.7);   	
}


#cf img {
        position:absolute;
        height:auto;
        width:92vw;
        float:left;
}

#cf img {
        -webkit-animation-name: cfFadeio;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 35s;
    
        -moz-animation-name: cfFadeio;
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-iteration-count: infinite;
        -moz-animation-duration: 35s;
    
        animation-name: cfFadeio;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-duration: 35s;
}

#cf img:nth-of-type(1) {-webkit-animation-delay: 28s; -moz-animation-delay:40s; animation-delay:28s;}
#cf img:nth-of-type(2) {-webkit-animation-delay: 21s; -moz-animation-delay:30s; animation-delay:21s;}
#cf img:nth-of-type(3) {-webkit-animation-delay: 14s; -moz-animation-delay:20s; animation-delay:14s;}
#cf img:nth-of-type(4) {-webkit-animation-delay:  7s; -moz-animation-delay:10s; animation-delay: 7s;}
#cf img:nth-of-type(5) {-webkit-animation-delay:  0s; -moz-animation-delay: 0s; animation-delay: 0s;}

@-webkit-keyframes cfFadeio {
        0% {opacity:1;}
        15% {opacity:1;}
        20% {opacity:0;}
        95% {opacity:0;}
        100% {opacity:1;}
}

@-moz-keyframes cfFadeio {
        0% {opacity:1;}
        15% {opacity:1;}
        20% {opacity:0;}
        95% {opacity:0;}
        100% {opacity:1;}
}

@keyframes cfFadeio {
        0% {opacity:1;}
        15% {opacity:1;}
        20% {opacity:0;}
        95% {opacity:0;}
        100% {opacity:1;}
}


#cf2 img {
        position:absolute;
        width:80vw;
        height:auto;
        margin-left:6vw;
        box-shadow: 0.5vw 0.5vw 1vw #999;
        -webkit-transition: opacity 3s ease-in-out;
        -moz-transition: opacity 3s ease-in-out;
        transition: opacity 3s ease-in-out;
}

#cf2 img.top:hover {
        opacity:0;
}