*{
    margin: 0;
    padding: 0;
    /*font-family: helvetica, arial, sans-serif;*/
    font-family:"Exo 2",arial,sans-serif
    
}

html{
    margin-top: -50px !important;
}
.margin-top{
    margin-top: 50px;
}

body{
    background-color: #3e3e3e;
    color: #fbfcfe;
}

header{
    height: 70px;
    /*background: linear-gradient(rgb(96,96,96,0.5), rgb(234,234,234,0.1));*/
    background-color: white;
    margin-bottom: 15px;
    width: 100%;
    /*border-bottom: 1px solid ;*/
    position: fixed;
    
}


header .nav-logo{
    width: 50%;
    display: inline-block;
}

header .nav-logo a{
    display: block;
}

header .nav-logo img{
    width: 100%;
    margin-top: 10px;
    
}

header .nav-menu{
    cursor: pointer;
    float: right;
    margin: 30px 30px 0 0;
}

header .nav-menu-flat{
    display: none;
    text-align: right;
    float: left;
}


.nav-menu-flat a{
    text-decoration: none;
    color: white;
}

.elsewhere .nav-menu-flat a{
    color: black;
}

.nav-menu-flat li{
    display: none;
    list-style-type: none;
    text-transform: uppercase;
    border-bottom: 2px solid black;
    margin: 0 20px;
    font-size: 1.3em;
    font-weight: 600;
    transition: color 0.5s, border-bottom 0.5s;
}

.nav-menu-flat li:hover{
    color: #FF3036;
    border-bottom: 2px solid #FF3036;
}

@media only screen and (min-width: 250px) {
    header .nav-logo{
        width: 70%;
    }
}

@media only screen and (min-width: 350px) {
    header .nav-logo{
        width: 50%;
    }
}

@media only screen and (min-width: 650px) {
    header .nav-logo{
        width: 30%;
    }
}



/*---------------------------------- hamburger -------------------------------*/
.nav-toggler{
    cursor: pointer;
    height: 40px;
    width: 40px;
    z-index: 1;
    margin-top: -15px;
    margin-right: -10px;
}

.nav-toggler svg{
    padding: 8px 5px;
}

.nav-menu-container{
    position: absolute;
    background-color: white;
    display: none;
    top: 60px;
    left: 5%;
    width: 90%;
    opacity: 0.95;
    border-radius: 5px;
}

.nav-menu-container ul{
    list-style-type: none;
    padding: 10px 20px;
    text-align: center;
}

.nav-menu-container a{
    text-decoration: none;
    color: black;
}

.nav-menu-container li{
    text-transform: uppercase;
    font-weight: 600;
    line-height: 2em;
    font-size: 1.2em;
}

.nav-menu-container li span{
    border-bottom: 1px solid black;
}


@media only screen and (min-width: 350px) {
    .nav-menu-container{
        width: 60%;
        left: 30%;
    }
}

@media only screen and (min-width: 450px) {
    .nav-menu-container{
        width: 50%;
        left: 40%;
    }
}

@media only screen and (min-width: 700px) {
    .nav-menu-container{
        width: 40%;
        left: 55%;
    }
}

@media only screen and (min-width: 920px) {
    header .nav-menu-flat{
        display: inline-block;
    }
    .nav-menu-flat li{
        display: inline-block;
    }
    header .nav-menu-container, .nav-toggler, .nav-toggle-icon{
        display: none;
    }
}

/*@media only screen and (min-width: 1024px) {*/
/*    .nav-menu-container{*/
/*        width: 25%;*/
/*        left: 70%;*/
/*    }*/
/*}*/

/*@media only screen and (min-width: 1400px) {*/
/*    .nav-menu-container{*/
/*        width: 10%;*/
/*        left: 87%;*/
/*    }*/
/*}*/

/*---------------------------------- header end ------------------------------*/
/*---------------------------------- body start ------------------------------*/
.body-container{
    width: 100%;
    text-align: center;
}

.row{
    width: 90%;
    padding-left: 5%;
}

/*---------------------------------- form start ------------------------------*/

.form-row{
    margin-top: 10px;
}

.form-row h1{
    width: 90%;
    margin-left: 5%;
    font-size: 1.4em;
}

.form-row .sign-form{
    width: 100%;
    display: block;
    height: 50px;
    margin: 40px 0;
}

.form-row .email{
    float: left;
    width: 95%;
    margin-right: 2.5%;
    height: 33px;
    border: 2px solid black;
    border-radius: 5px;
    padding-left: 2.5%;
    font-size: 1.05em;
}

.form-row .button{
    width: 50%;
    font-weight: 600;
    text-align: center;
    height: 37px;
    border: 2px solid black;
    border-radius: 5px;
    background-color: #FF3036;
    margin: 5px 20% 5px 20%;
    color: #fbfcfe;
    text-transform: uppercase;
    transition: background-color 0.5s;
}

.form-row .button:hover{
    background-color: #c90005;
}


.form-row .clear{
    display: none;
}

h3{
    text-align: center;
    width: 90%;
    margin-left: 5%;
    font-size: 1.15em;
    font-weight: 500;
    line-height: 1.25em;
}




@media only screen and (min-width: 300px) {
    .form-row{
        margin-top: 20px;
    }
}

@media only screen and (min-width: 400px) {
    .form-row .email{
        width: 62%;
        margin-left: 2%;
        border-radius: 5px 0 0 5px;
        display: block;
        margin-right: -2px;
    }
    
    .form-row .button{
        width: 30%;
        display: block;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
    }
    
    .form-row .sign-form{
        margin: 20px 0;
    }
}





@media only screen and (min-width: 767px) {
    .form-row{
        width: 50%;
        margin-top: 40px;
    }
    
    h3{
        text-align: left;
        margin-left: 6%;
    }
    
    .form-row h1{
        text-align: left;
        width: 95%;
        margin-left: 2.5%;
        font-size: 2em;
    }
}

@media only screen and (min-width: 1000px) {
    .form-row{
        margin-top: 100px;
    }
}


/*---------------------------------- form end --------------------------------*/

/*--------------------------------- image start ------------------------------*/
.image-row{
    height: 175px;
}
.image-row .image-box{
    position: relative;
    top: 400px;
    z-index: -1;
}

.image-row .image-box{
    position: absolute;
}

.image-row .image-box img{
    width: 90%;
}

@media only screen and (min-width: 240px) {
    .image-row{
        height: 200px;
    }
    
}

@media only screen and (min-width: 265px) {
    .image-row{
        height: 225px;
    }
}

@media only screen and (min-width: 275px) {
    .image-row{
        height: 250px;
    }
}

@media only screen and (min-width: 300px) {
    .image-row{
        height: 275px;
    }
}

@media only screen and (min-width: 325px) {
    .image-row{
        height: 300px;
    }
}

@media only screen and (min-width: 360px) {
    .image-row .image-box{
        top: 360px;
    }
}

@media only screen and (min-width: 385px) {
    .image-row{
        height: 325px;
    }
}

@media only screen and (min-width: 400px) {
    .image-row .image-box{
        top: 310px;
    }
}

@media only screen and (min-width: 430px) {
    .image-row{
        height: 350px;
    }
}

@media only screen and (min-width: 590px) {
    .image-row{
        height: 375px;
    }
}

@media only screen and (min-width: 590px) {
    .image-row{
        height: 400px;
    }
}

@media only screen and (min-width: 767px) {
    .image-row .image-box{
        top: 100px;
        left: 55%;
    }
    
    .image-row{
        height: 50px;
    }
}

@media only screen and (min-width: 830px) {
    .image-row{
        height: 100px;
    }
}
    
@media only screen and (min-width: 890px) {
    .image-row{
        height: 125px;
    }
}

@media only screen and (min-width: 1000px) {
    .image-row{
        height: 100px;
    }
}


/*---------------------------------- image end -------------------------------*/

/*--------------------------------- latest start -----------------------------*/
.latest-row{
    background-color: white;
    height: 120px;
}

.latest-row h2{
    text-transform: uppercase;
    font-size: 1.1em;
    color: black;
    padding-top: 20px;
}
.latest-row .read-now{
    width: 60%;
    border: 2px solid black;
    background-color: white;
    color: black;
    text-transform: uppercase;
    margin-left: 20%;
    margin-top: 15px;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.5s;
}

.latest-row .read-now:hover{
    background-color: #3e3e3e;
}

.latest-row a{
    text-decoration: none;
    color: black;
    display: block;
    transition: color 0.5s;
    padding: 6px 0;
}

.latest-row a:hover{
    color: white;
}



@media only screen and (min-width: 300px) {
    .latest-row .read-now{
        width: 40%;
        margin-left: 30%;
    }
}

@media only screen and (min-width: 1024px) {
    .latest-row .read-now{
        width: 20%;
        margin-left: 40%;
        margin-top: 60px;
    }
    
    .latest-row{
        height: 300px;
    }
    
    .latest-row h2{
        padding-top: 80px;
        font-size: 2em;
    }
}



/*--------------------------------- latest end -------------------------------*/





/*---------------------------------- body end --------------------------------*/

/*---------------------------------- footer start ----------------------------*/
.foot-row{
    padding: 20px 0;
    width: 100%;
    text-align: center;
    background-color: #3e3e3e;
}

.foot-row ul{
    margin-bottom: 10px;
}

.foot-row li{
    display: inline-block;
    width: 42%;
    margin: 0 3% 15px 3%;
    font-weight: 600;
    border: 1px solid black;
    background-color: white;
    border-radius: 5px;
    padding: 3px 0;
    transition: background-color 0.5s;
}

.foot-row li:hover{
    background-color: #3e3e3e;
}

.foot-row li a{
    color: black;
    display: block;
    transition: color 0.5s;
}

.foot-row li a:hover{
    color: white;
}

.foot-row a{
    text-decoration: none;
    color: #FF3036;
    transition: color 0.5s;
}

.foot-row a:hover{
    color: white;
}

.foot-row p{
    width: 95%;
    margin: 0 2.5% 8px 2.5%;
}

@media only screen and (min-width: 300px) {
    .foot-row li{
        width: 30%;
    }
}

@media only screen and (min-width: 767px) {
    .foot-row li{
        width: 15%;
    }
    
    .foot-row{
        /*padding-top: 100px;*/
    }
}

/*---------------------------------- footer end ------------------------------*/


/*--------------- Archive page ------------------------------*/



.archive-title{
	font-weight: 500;
	margin-top: 10px;
	color: black;
    width: 80%;
    text-align: center;
    padding: 0;
    margin-left: 10%;
}

.archive-body-row{
    padding-top: 70px;
	width: 60%;
	margin: 0 20% 20px 20%;
	display: block;
	height: auto;
}

.archive{
	background-color: white;
	width: 90%;
	max-width: 90%;
	border-radius: 10px;
	padding-top: 20px;
	margin: 20px 5% 0 5%;
	color: black;
	text-align: center;
	min-height: 70vh;
}

@media only screen and (min-width: 767px) {
    .archive{
	/*min-height: 85vh;*/
    }
}

.past-editions li{
	width: 90%;
	margin-left: 5%;
	padding: 10px 0 10px 20px;
	border-bottom: 2px solid #e9e9e9;
	font-size: 1em;
	text-align: left;
	list-style-type: none;
}



.past-editions li:first-child{
	border-top: 2px solid #e9e9e9;
	margin-top: 3vh;
}


.page{
	background-color: #f2f2f2;
	min-height: 100vh;
}


.archive h3 a{
	color: #de002b;
}

.archive h3 a:hover{
	color: #333;
}

.archive a{
    text-decoration: none;
    color: black;
    font-weight: 600;
	transition: color 0.5s;
}

.archive a:hover{
	color: #de002b;
}

.archive img{
    margin-bottom: 10px;
}

@media only screen and (min-width: 1280px) {
	.archive{
		max-width: 80%;
		margin-left: 10%;
	}

	.past-editions li{
		width: 70%;
		margin-left: 15%;
	}

}


@media only screen and (max-width: 900px){
	.page{
		font-size: 0.8em;
	}

	.body-row h2{
	margin-bottom: 50px;
    }

}



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

	.archive-body-row{
		/*margin-top: 3vh;*/
	}



 	.archive-body-row{
 		width: 90vw;
 		margin-left: 5vw;
 	}

 	.archive h1{
 		font-size: 1.3rem;
 	}

 	.archive h3{
 		font-size: 1rem;
 	}

 	.archive li{
 		font-size: 1.05rem;
 		padding-left: 5px;
 	}
 	.archive a{
 		font-size: 1.1rem;
 	}
 	
 	.privacy{
        line-height: 2em;
        font-size:1.2em;
 	}
    
    .copyright{
        font-size: 18px;
        margin-bottom: 20px;
    }
 }
 
.article-logo-image{
    width: 80%;
    max-width: 300px;
    min-width: 150px;
    padding-top: 70px;
}

 /*--------------- Article page ------------------------------*/

.article-body {
    padding: 90px 0 20px 0;
}
.article-body-row {
    width: 60%;
    margin: 0 20% 20px 20%;
    background-color: white;
    border-radius: 19px;
    color: black;
    padding: 30px 0 10px 0;
}
.article-body-row h1 {
    text-align: center;
}
.article-body-row p {
    line-height: 1.5rem;
    margin: 20px 3%;
    width: 94%;
}
@media only screen and (max-width: 767px) {
    .article-body-row {
        width: 90%;
        margin: 0 5% 20px 5%;
    }
    .article-body-row p {
        font-size: 1.5em;
    }

}
	
	
 /*--------------- Policy page ------------------------------*/
 	 .policy{
 	margin-left: 5%;
 	width: 90%;
 	text-align: left;
 	color: black;
 }
 
 .policy h3{
     text-align: center;
     padding: 0;
     font-weight: 600;
 }

@media only screen and (max-width: 767px){
	 .policy{
 	font-size: 1.4rem;
 }
}


#awesomewrap {color:#444; font-size:14px; text-shadow:none; position:relative; z-index:999;}
#awesomewrap * {margin:0; padding:0; font-family:"Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;}
#awesomewrap a {color:#444 !important; text-decoration:none;}
#awesomewrap a:hover {color:#000 !important;}
#awesomewrap li {list-style:none; display:inline;}

#awesomewrap .float-l {float:left;}

#awesomebar, #awesomeshare {position:fixed; top:0; left:0; width:100%; height:40px; border-bottom:1px solid #ccc; background:rgb(244,244,244); background:rgba(244,244,244,.95); min-width:815px;}
#awesomebar {-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.2); box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);}
#awesomebar.sub-active {background:#f4f4f4;}
#awesomebar > li > a {display:block; font-weight:bold; float:left; line-height:40px; padding:0 5px; border-right:1px solid #ccc;}
#awesomebar > li > a:hover {background:#fff;}