@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;	
}

@font-face {
    font-family: 'armonela_blackregular';
    src: url('armonelablack-webfont.woff2') format('woff2'),
         url('armonelablack-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body{
   
    font-size: 14px;
    font-family: Arial, Helvetica, Sans-Serif;
    text-align: left;
    line-height: 1.5;
}

.body{
       
    margin:0 auto;
	padding:0;	
    width:100%;
    clear: both;
}

header{
    
	width:100%;
	height:200px;
	background: #FFB9BB;
    display: flex;
    flex: 1 1 80%;
    text-align: center;
    
}


.logo{
    
    padding-left:1px;
    position: fixed;
}
header h1 {
    
    font-family: 'armonela_blackregular', Arial, sans-serif;
    font-size: 80px; 
    position: fixed;
    margin: -15px 0px 0px 500px;
    color:#0033BA;
    text-align: center;
    
}

header h2{
    
        font-family: 'armonela_blackregular', Arial, sans-serif;
        position: fixed;
        top: 10%; 
        left: 50%; 
        font-size: 35px; 
        background: linear-gradient( to right, #f32170, #ff6b08, #cf23cf, #f32170); 
        -webkit-text-fill-color: transparent; 
        -webkit-background-clip: text; 

}

nav{
    float:right;
    text-align: center;
    top: 15%; 
    right: 1%;
    position: fixed;
    
}   
 .hoverbutton {
  font-family: Arial, Helvetica, Sans-Serif;
  padding: 15px 20px;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  margin:0px 10px 50px 5px; 
  animation: navigation 5s infinite;

}

/*.button:hover {background-color: #3e8e41}*/


.hoverbutton {
   
    font-family: Arial, Helvetica, Sans-Serif;
    padding: 15px 20px;
    width: 220px;
    font-size: 20px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #4CAF50;
    cursor: pointer;
    position: relative;
    z-index: 0;
    text-align: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-shadow: 0px 1px 0px #000;
    filter: dropshadow(color=#000, offx=0px, offy=1px);
    -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
    -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
     box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
     
}

.hoverbutton:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: 5px;
    left:5px;
    background-size: 400%;
    z-index: -1;
    filter: blur(15px);
    width: 100%;
    height: 100%;
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 20px;
}
.hoverbutton:active {
    
    top:10px;
    background-color:#F78900;
    -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
    box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
}

.hoverbutton:active:after {
    background: transparent;
}

.hoverbutton:hover:before {
    opacity: 1;
}

.hoverbutton:after {
   content:"";
  position: absolute;
  bottom:-15px;
  left:-4px;
  z-index:-1;
  background-color:#2B1800;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 25px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

main{
    
	width:100%;
	display: flex;	
	flex-direction: row;
    height:450px;
    background-color:#FFF;
    flex: 1 1 80%;
	
}
section{
    width:70%;
	float:left;	
	position: relative;
    background-color:#ccc;
    height:auto;
    flex: 1 1 70%;
    display: flex;
    align-items: stretch;
}


div.heading{
    
    text-align:center;
    position:fixed;
    
}

div.heading h2 {
    font-family: 'armonela_blackregular', Arial, sans-serif;
    text-align:center;
    color:#fffff;
    padding-top: 20px;
    margin: 2px 0 0 600px;
    font-size:30px;
    position: absolute; 
    -webkit-text-fill-color: transparent; 
     -webkit-background-clip: text; 

      
}

div.heading h3 {
    font-family: 'armonela_blackregular', Arial, sans-serif;
    color:#0033BA;
    background-color:#4CAF50;
    float:left;
    padding:10px ; 
    border-radius:20px;
    height:1.2em;
    text-align:center;
    margin:20px 0 0 40px;
    font-size:25px;
} 

div.content{
	
	padding:100px 0 0 40px;
	float:left;
    font-size:18px;
    width:90%;
    height:300px;  
    
}

aside {
	width:100%;
    float:right;
	flex: 0 0 300px;
    background-color:#FFF;
    height:auto;
    display: flex;

}


#img1{
    
    width:100%;
    height:49%;
    float:right;
	flex: 0 0 300px;
    display: flex;
    margin-bottom:0.5px;
    padding-bottom:1px;
      
}

#img2{
    
    width:100%;
    height:50%;
    float:right;
	flex: 0 0 300px;
    display: flex;
   
      
}
footer{
    
    font-family: Arial, Helvetica, Sans-Serif;
	width:100%;
	height:202px;
	background-color: #575757;
    font-size: 15px;
    color:white;
}

.footerlinks {
    
    padding:20px 0 0 40px;
    float:left;
    margin:5px -20px 0 0px;  
}

a:link {
    text-decoration:none;
	color:white;
	
}

a:visited {
	text-decoration:none;
	color:white;
}
a:hover{
	background-color: cornflowerblue;
}

a:active{
	text-decoration:none;
	color:white;
	
}


.fa {
  padding: 10px;
  font-size: 20px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  margin:15px 0 0 10px;;
}


.fa:hover {
  opacity: 0.7;
}



/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
 float:center;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
     float:center;
}




    
/* Mobile devices () */
@media only screen and (min-width:150px) and (max-width:425px)  { 
    
    header{
    
	width:100%;
	height:150px;
    text-align: center;
    
}

.logo{
 
    height:auto;
    width:35%;
}
header h1 {
    
    font-family: 'armonela_blackregular', Arial, sans-serif;
    font-size: 30px; 
    position: fixed;
    margin: 5px 0px 0px 190px;
    color:#000;
    text-align: center;
    
}

header h2{
    display:none;
}
  
    nav{
    margin:2px opx 0 20px;   
    float:right;
    display:relative;  
    }  
    
a.hoverbutton {
  
    text-align: center;
    position: relative; 
    font-family: Arial, Helvetica, Sans-Serif;
    padding: 5px 5px;
    font-size: 10px;
    cursor: pointer;
    outline: none;
    margin:0px 10px 0 2px;  
    background-color: #4CAF50;
    border: none;
    border-radius: 10px;
    animation: navigation 5s infinite;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-shadow: 0px 1px 0px #000;
    filter: dropshadow(color=#000, offx=0px, offy=1px);
    -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
    -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
     box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
     box-shadow: 0 2px #999;
     
    
    }

    
    
main{
    
	width:100%;
    height:400px;
    background-color:#FFF;
	
}
section{
    
    width:100%;
	float:none;
	position: relative;
    background-color:#ccc;
    height:500px;
    align-items: stretch;
}


div.heading h2 {
   Display:none;
}

div.heading h3 {
    font-family: Arial, Helvetica, Sans-Serif;
    color:#fff;
    background-color:#4CAF50;
    float:left;
    padding:5px 10px 10px 10px; 
    border-radius:20px;
    height:1.2em;
    text-align:center;
    margin:20px 0 0 20px;
    font-size:15px;
    position:fixed;
} 

div.content{
	
	padding:50px 0 0 40px;
	float:none;
    font-size:14px;
    width:85%;
    height:100%;
    margin-top: 40px;
    
    
}

aside {
	display:none;

}


footer{
    
    font-family: Arial, Helvetica, Sans-Serif;
	width:100%;
	height:150px;
	background-color: #575757;
    font-size: 15px;
    color:white;
    margin-top:110px;
    position: fixed;
}
    
    .footerlinks {
    
    padding:10px 0 0 20px;
    float:center;
       
}

.fa {
  padding: 8px;
  font-size: 20px;
  width: 20px;
    float:right;
  text-align: center;
  text-decoration: none;
  margin:-20px 10px 0 0px;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
 float:center;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
     float:center;
}
    
}



@media only screen and (min-width:375px) and (max-width:768px)  { 
      
header{
    
	width:100%;
	height:120px;
    text-align: center;
}

.logo{
 
    height:auto;
    width:30%;
}
    
header h1 {
    
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 25px; 
    position: relative;
    margin: 10px 0px 0px 130px;
    text-align: center;
    color:#0033BA;
}


header h2{
    
       display:none;
}

nav{
    margin-top: -10%; 
    position: fixed;
}   


a.hoverbutton {
   
     box-shadow:inset 0 1px 0 #FFE5C4, 0 5px 0 #915100;
    font-size:10px;
    margin:0 2px;
}



section{
    height:520px;
    position: fixed;
   
}
    div.content{
	
	padding:60px 0 0 40px;
	float:left;
    font-size:15px;
    width:85%;
    height:300px;
    position: fixed;
    margin-top:-2px;
    
}

div.heading{
    
    text-align:center;
    position:fixed;
    
}

div.heading h3 {
    font-family: Arial, Helvetica, Sans-Serif;
    padding:none;
    margin: 20px 0 0 40px;
    font-size:15px;
    position: fixed; 
      
} 
    
 aside {
	display:none;

}


#img1{
    
   display:none;
}

#img2{
    
   display:none;
   
      
}   
footer{
    margin-top:120px;
    height:150px;
}

  a.fa {
  
  float:right;
  text-decoration: none;
  margin:-20px 20px 0 0px;
}

}  



/* Tablet devices () */
@media only screen and (max-width:1024px) and (min-width:768px)  { 
      
header{
    
	width:100%;
	height:150px;
    text-align: center;
    
}

.logo{
 
    height:auto;
    width:20%;
}
    
header h1 {
    
    font-family: 'armonela_blackregular', Arial, sans-serif;
    font-size: 40px; 
    margin: 10px 0px 0px 250px;
    color:#0033BA;
    
}

header h2{
    
        top: 5%; 
        left: 40%; 
        font-size: 20px; 
}

nav{
    top: 18%;    
} 
    
.hoverbutton {
   
    padding: 10px 10px;
     box-shadow:inset 0 1px 0 #FFE5C4, 0 5px 0 #915100;
 
}

 section{
    width:70%;
	float:left;	
	position: relative;
    background-color:#ccc;
    height:460px;
    flex: 1 1 70%;
    display: flex;
    align-items: stretch;
}

div.heading h3 {
    font-family: 'armonela_blackregular', Arial, sans-serif;
    color:#0033BA;
    float:left;
    text-align:center;
    margin:20px 0 0 40px;
    font-size:25px;
    padding:none;
} 

div.content{
	
	padding:100px 0 0 40px;
	float:left;
    font-size:16px;
    width:65%;
    height:200px;  
    
}
   
aside {
	flex: 0 0 250px;
    height:460px;
}


#img1{
	flex: 0 0 250px;
    height:50%; 
    
}

#img2{
	flex: 0 0 250px;
    height:49%; 
}
    
footer{
    margin-top:10px;
    height:190px;
}

a.fa {
  
  float:right;
  text-decoration: none;
  margin:-20px 0px 0 0px;
}

}  



/* For  Big laptops and desktop devices () */
@media only screen and (max-width:1500px) and (min-width:1024px)  { 
      
header{
    
	width:100%;
	height:200px;
    text-align: center; 
}

.logo{
 
    height:auto;
    width:14%;
}
    
header h1 {
    
    font-family: 'armonela_blackregular', Arial, sans-serif;
    font-size: 80px; 
    position: fixed;
    margin: -10px 0px 0px 400px;
   
    
}

header h2{
    
        top: 12%; 
        left: 40%; 
        font-size: 25px; 
    
}

nav{
    top:18%;    
}   

.hoverbutton {
   
     padding: 10px 20px;
     box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
 
}

section{
    height:450px;
   
}

    
div.heading{
    
    text-align:center;
    position:fixed;
    
}

div.heading h2 {
    
    padding-top: 20px;
    margin: 2px 0 0 600px;
    font-size:30px;
    position: absolute; 
      
}

#img1{
    
    height:50%;     
}

#img2{height:49%;
        
}
footer{
    margin-top:0px;
    height:150px;
}
    
a.fa {
  position:relative;
  float:right;
  text-decoration: none;
  margin:-20px 0px 0 0px;
}

}