/* Define Fonts */
@import "fonts.css";
@import "fonticons.css";

/* Media Queries */
@media screen and (max-width: 39.9375em) {} /* Small only */
@media screen and (min-width: 40em) {} /* Medium and up */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {} /* Medium only */
@media screen and (min-width: 64em) {} /* Large and up */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {} /* Large only */

/* Base Styles */
html { width: 100%; height: 100%; font-size: 22px; }
body { width: 100%; height: 100%; background: url(../img/bg.jpg); font-size: 16px; padding-top: 3em; }
h1 , h2 , h3 , h4 , h5 , h6 { font-family: 'iranSans'; }
h1 { font-size: 4em; font-weight: bold; line-height: 2em; }
h2 { font-size: 2em; font-weight: bold; line-height: 2em; }
h2 a { color: black; transition: all ease 0.7s; position: relative; }
h2 a:hover { color: #e41e25; transition: all ease 0.7s; }
h2 a:after { content: ''; position: absolute; width: 0%; height: 2px; background: #000000; bottom: -10px; left: 50%; transition: all ease 0.7s; }
h2 a:hover:after { content: ''; position: absolute; width: 100%; height: 2px; background: #e41e25; bottom: -10px; left: 0; transition: all ease 0.7s; }
a.contact { font-family: 'iranSans'; display: inline-block; margin: 2em; position: relative; color: black; transition: all ease 0.7s; }
a.contact:hover { color: #e41e25; transition: all ease 0.7s; }
a.contact:after { content: '/'; position: absolute; left: -2em; top: 0; width: 10px; height: 100%; font-weight: bold; }
a.contact:last-of-type:after { content: none; }